Gulp环境搭建与应用（一）

1、环境搭建

1.1、全局依赖安装

先执行cnpm install --global gulp命令，安装全局依赖环境（cnpm使用的淘宝镜像，比npm速度更快）

1.2、项目依赖安装

在项目根目录下执行cnpm install --save-dev gulp命令，安装项目依赖环境

1.3、创建gulpfile.js文件

在项目根目录下创建gulpfile.js文件，并编写一个测试任务。cb()表示回调函数

//cb表示回调函数
function defaultTask(cb) {
    console.log("hello gulp");
    cb();
}
exports.default = defaultTask;

1.4、初始化目录结构

1.5、执行任务验证

在项目根目录下执行gulp命令，控制台输出任务执行结果，则表示环境搭建成功了

2、js/css/html/image压缩

2.1、插件安装

不同文件压缩需要依赖不同的插件
js压缩：cnpm install --save-dev gulp-uglify
css压缩：cnpm install --save-dev gulp-minify-css
html压缩：cnpm install --save-dev gulp-minify-html
image压缩：cnpm install --save-dev gulp-imagemin

2.2、代码示例

这里使用v3版本编写，目标将src目录下的资源文件，压缩处理后，输出到dist目录下

/******** V3旧版 ********/
var gulp = require('gulp');
var jsUglify = require("gulp-uglify");
var cssUglify = require("gulp-minify-css");
var htmlUglify = require("gulp-minify-html");
var imageUglify = require("gulp-imagemin");

//js压缩
gulp.task("jsuglify",(cb) => {
    gulp.src("src/js/*.js")
        .pipe(jsUglify())
        .pipe(gulp.dest("dist/js"))
    cb();
});

// css压缩
gulp.task("cssuglify",(cb) => {
    gulp.src("src/css/*.css")
        .pipe(cssUglify())
        .pipe(gulp.dest("dist/css"))
    cb();
});

// html压缩
gulp.task("htmlUglify",(cb) => {
    gulp.src("src/index.html")
        .pipe(htmlUglify())
        .pipe(gulp.dest("dist/"))
    cb();
});

// 压缩image任务
gulp.task("imageUglify",(cb) => {
    gulp.src("src/images/*.{png,jpg,gif,ico,jpeg,svg}")
        .pipe(imageUglify({
            progressive: true,    //类型：Boolean 默认：false 无损压缩jpg图片
            multipass: true,       //类型：Boolean 默认：false 多次优化svg直到完全优化
            optimizationLevel: 5, //类型：Number  默认：3  取值范围：0-7（优化等级）
            interlaced: true,     //类型：Boolean 默认：false 隔行扫描gif进行渲染
        }))
        .pipe(gulp.dest("dist/images"));
    cb();
});

//任务主入口
gulp.task('default',gulp.series("jsuglify","cssuglify","htmlUglify","imageUglify",(cb) =>{
    cb();
}));

2.3、效果查看

压缩前，dist目录中为空

执行压缩任务
在项目中使用gulp命令，可以看到jsuglify、cssuglify、htmlUglify、imageUglify等任务都成功执行了

压缩后，dist目录中生成了src目录结构，如果点开里面的js/css文件，可以看到代码已经被压缩混淆；

3、代码检查

3.1、插件安装

执行命令cnpm install --save-dev gulp-jshint jshint

3.2、代码示例

检查src/js/目录下的test01.js文件

var jshint = require("gulp-jshint");
// 代码检查
gulp.task("jshint",(cb) => {
    gulp.src("src/js/test01.js")
        .pipe(jshint())
        .pipe(jshint.reporter()) // 代码检查
    cb();
});

test01.js

var resInfo={
    "result":{
        "code":"200",
        "movie":[
            {
                "name":"当幸福来敲门",
                "area":"美国",
                "role":"威尔史密斯"
            },{
                "name":"阿甘正传",
                "area":"美国",
                "role":"汤姆汉克斯"
            },{
                "name":"喜剧之王",
                "area":"中国",
                "role":"周星驰"
            }
        ]
    }
}

//导出数据
module.exports = resInfo;

3.3、效果查看

执行命令gulp jshint，可以看到test01.js的第20行缺失分号，检测为不符合编码规范（但js中语句结束时不加分号并不影响运行）

4、合并与重命名

4.1、插件安装

执行命令cnpm install --save-dev gulp-concat gulp-rename

4.2、代码示例

将src/js/目录下的多个js文件，合成、压缩成一个文件，并重命名为app.min.js

var jsUglify = require("gulp-uglify");
var codeConcat = require("gulp-concat");
var fileRename = require("gulp-rename");

// 合并、重命名、压缩
gulp.task("reconcat",(cb) => {
    gulp.src("src/js/*.js")
        .pipe(codeConcat("app.js"))
        .pipe(fileRename({
            suffix:".min"
        }))
        .pipe(jsUglify())
        .pipe(gulp.dest("dist/js"))
    cb();
});

4.3、效果查看

执行任务 gulp reconcat

5、less编译与监听

5.1、插件安装

执行命令cnpm install --save-dev gulp-less

5.2、编译代码与效果

var reLess = require("gulp-less");
gulp.task("reless",(cb) => {
    gulp.src("src/css/*.less")
        .pipe(reLess())
        .pipe(gulp.dest("dist/css"))
    cb();
});

执行任务gulp reless，将less01.less编译为了less01.css

5.3、监听less变换

通过watch()函数实时监听less文件变换，启用监听需执行任务gulp watchLess，这样，如果我们修改了less文件，对应的css文件也会更新

// 监听less的改变
gulp.task("watchLess",(cb) => {
    gulp.watch("src/css/*.less",gulp.series("reless"),() => {});
    cb();
});