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 })

 

posted @ 2019-04-25 21:45  南小阁  阅读(720)  评论(0编辑  收藏  举报