gulp常用插件

整理一下gulp常用插件：

 

压缩js（es5）：gulp-uglify

安装：cnpm i gulp-uglify -D

var gulp = require('gulp');
var uglify = require("gulp-uglify");

gulp.task('default', function() {
    gulp
        .src('less/**/*.less')
        .pipe( uglify())
        .pipe(gulp.dest("dist/img"))
});

 

es6转es5语法：gulp-babel:

安装：

# Babel 7
$ npm install  gulp-babel @babel/core @babel/preset-env -D

# Babel 6
$ npm install gulp-babel@7 babel-core babel-preset-env -D

使用

var gulp = require('gulp');
var uglify = require('gulp-uglify');
const babel = require('gulp-babel');

gulp.task("uglify",function(){
    gulp
        .src("js/**/*.js")
        .pipe(babel({
            presets: ['@babel/env']
        }))//支持es6
        .pipe(uglify())//压缩
        .pipe(gulp.dest("dist"))
})

 

重命名：gulp-rename

安装：cnpm i gulp-rename -D

使用：

var gulp = require('gulp');
var rename = require("gulp-rename");
 
gulp.task("uglify",function(){
    gulp
        .src('js/*.js')       // 源
        .pipe(rename({
            dirname: "./js",//输出地址后的地址
            suffix: ".min",            // 文件名后缀
        }))
        .pipe(gulp.dest('dist/')) // 设定输出地址
})

 

less转css：gulp-less

安装：cnpm i gulp-less -D

使用：

var gulp = require('gulp');
var less = require("gulp-less");

gulp.task('default', function() {
    gulp
        .src('less/**/*.less')
        .pipe(less())//less转css
        .pipe(gulp.dest("dist/css"))
});

 

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

使用：

var gulp = require('gulp');
var imagemin = require("gulp-imagemin");

gulp.task('default', function() {
    gulp
        .src('images/**/*')
        .pipe(imagemin())
        .pipe(gulp.dest("dist/img"))
});

 

监听：gulp.watch

安装：不需要额外安装，直接使用gulp模块

配置：gulp.watch(监听目录,任务集合)

使用：

把监听配置到任务中
gulp.task('default',function(){

　　gulp.watch(监听目录1,任务集合1);
　　gulp.watch(监听目录2,任务集合2);
})