gulp常用插件
整理一下gulp常用插件:
压缩js(es5):gulp-uglify
安装:cnpm i gulp-uglify -D
1 var gulp = require('gulp'); 2 var uglify = require("gulp-uglify"); 3 4 gulp.task('default', function() { 5 gulp 6 .src('less/**/*.less') 7 .pipe( uglify()) 8 .pipe(gulp.dest("dist/img")) 9 });
es6转es5语法:gulp-babel:
安装:
1 # Babel 7 2 $ npm install gulp-babel @babel/core @babel/preset-env -D 3 4 # Babel 6 5 $ npm install gulp-babel@7 babel-core babel-preset-env -D
使用
1 var gulp = require('gulp'); 2 var uglify = require('gulp-uglify'); 3 const babel = require('gulp-babel'); 4 5 gulp.task("uglify",function(){ 6 gulp 7 .src("js/**/*.js") 8 .pipe(babel({ 9 presets: ['@babel/env'] 10 }))//支持es6 11 .pipe(uglify())//压缩 12 .pipe(gulp.dest("dist")) 13 })
重命名:gulp-rename
安装:cnpm i gulp-rename -D
使用:
1 var gulp = require('gulp'); 2 var rename = require("gulp-rename"); 3 4 gulp.task("uglify",function(){ 5 gulp 6 .src('js/*.js') // 源 7 .pipe(rename({ 8 dirname: "./js",//输出地址后的地址 9 suffix: ".min", // 文件名后缀 10 })) 11 .pipe(gulp.dest('dist/')) // 设定输出地址 12 })
less转css:gulp-less
安装:cnpm i gulp-less -D
使用:
1 var gulp = require('gulp'); 2 var less = require("gulp-less"); 3 4 gulp.task('default', function() { 5 gulp 6 .src('less/**/*.less') 7 .pipe(less())//less转css 8 .pipe(gulp.dest("dist/css")) 9 });
css压缩:gulp-clean-css
安装:cnpm i gulp-clean-css -D
使用:
var gulp = require('gulp'); var cleanCSS = require("gulp-clean-css"); gulp.task('default', function() { gulp .src('less/**/*.less') .pipe(cleanCSS({ compatibility: 'ie8' }))//压缩css .pipe(gulp.dest("dist/css")) });
图片压缩:gulp-imagemin
安装:cnpm i gulp-imagemin -D
使用:
1 var gulp = require('gulp'); 2 var imagemin = require("gulp-imagemin"); 3 4 gulp.task('default', function() { 5 gulp 6 .src('images/**/*') 7 .pipe(imagemin()) 8 .pipe(gulp.dest("dist/img")) 9 });
监听:gulp.watch
安装:不需要额外安装,直接使用gulp模块
配置:gulp.watch(监听目录,任务集合)
使用:
1 把监听配置到任务中 2 gulp.task('default',function(){ 3 4 gulp.watch(监听目录1,任务集合1); 5 gulp.watch(监听目录2,任务集合2); 6 })