八Gulp自动化构建工具

Posted 2021-06-10 不负青春，不负代码

Gulp自动化构建工具

Gulp介绍

　　构建工具：对于需要反复重复的任务，例如压缩（minification）、编译、单元测试、lint代码质量检测等，自动化工具可以减轻你的劳动，简化你的工作。当配置文件中定义好任务后，任务运行器就会自动帮你或你的小组完成大部分无聊的工作。

　　Web中的构建工具：其实就是简化开发，提高效率。

　　gulp：Gulp是自动化构建工具，使用它可以增强你的工作流程！

gulp优势

• 一、易于使用。通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。（Gulp管理任务非常简单）
• 二、构建快速。利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。（采用管道流方式，进行加快编译速度）
• 三、插件高质。Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。（高质量的扩展功能）
• 四、易于学习。通过最少的 API，掌握 Gulp 毫不费力，构建工作尽在掌握：如同一系列流管道。（上手容易，易于理解）
• 五、文档齐全。http://www.gulpjs.com.cn/docs/

使用步骤

• 1. 全局安装：npm install --global gulp@3.9.1
• 2. 局部安装：npm install --save-dev gulp@3.9.1
• 3. 在项目根目录下创建一个名为 gulpfile.js 的文件：

var gulp = require(\'gulp\');
gulp.task(\'default\', function() {
    // 将你的默认的任务代码放在这
});

• 4. 运行 gulp：gulp。默认的名为 default 的任务（task）将会被运行，在这里，这个任务并未做任何事情。想要单独执行特定的任务（task），请输入 gulp <task> [<othertask>]。

gulp插件安装

1. 使用gulp插件首先就的安装插件，插件安装：

• cnpm i 插件名
• cnpm i gulp-uglify --save-dev 安装压缩插件

2. gulp插件的使用方式

　　gulp是基于流的自动化构建工具，采用管道流方式对文件进行处理（非所有，大部分）。 其中文件分为：src源文件, dest目标文件。

• src源文件：被执行任务的文件。
• dest目标文件：执行任务完毕后输出到的文件。

任务执行代码，如下：

gulp.src("js/*.js") //目标源文件列表
.pipe(uglify()) //对象源文件执行压缩任务
.pipe(gulp.dest("dest")); //输出到dest目录

src与dest之间可以有多个pipe管道任务。

3. gulp src源路径
　　gulp.src(path); 方法，设置源文件路径非常重要，可以设置一个明确的路径，比如：./js/index.js。但是更多时候我们需要通过匹配模式来简化路径的设置。

gulp支持node-glob匹配模式 ：https://github.com/isaacs/node-glob

• * 匹配任意数量的字符，但不匹配 /
• ** 匹配任意数量的字符，包括 /，只要它是路径中唯一的一部分
• {} 允许使用一个逗号分割的“或”表达式列表
• ! 在模式的开头用于排除一个匹配模式所匹配的任何文件（取反）

　　每个人都需要知道的是：foo/*.js将匹配位于foo/目录下的所有的.js结尾的文件；而foo/**/*js将匹配foo/目录以及其子目录中所有以.js结尾的文件。

• gulp.src(path);
• gulp.src([path,path]);

gulp-uglify压缩js

安装：cnpm i gulp-uglify

引入：gulp模块var gulp = require(\'gulp\');

引入压缩插件：var uglify = require(\'gulp-uglify\');

定义任务：

gulp.task(\'uglifyJS\', function () {
    return pipeline(
        gulp.src(\'js/*.js\'), //监听的目标原路径
        uglify(), //执行JS压缩任务
        gulp.dest(\'dist\') //任务执行完成后,新文件放在哪个文件夹下
    );
});

gulp-rename重命名

　　一般开发中，为了区分压缩和非压缩的文件，压缩文件后缀一般为.min。 此时就可以使用gulp-rename来修改名字。

安装：cnpm i gulp-rename

//导入rename重命名插件
//引入gulp模块
var gulp = require(\'gulp\');

引入压缩插件：var uglify = require(\'gulp-uglify\');

引入重命名插件：var rename=require(\'gulp-rename\');

//定义任务
gulp.task("uglify",function () {
    //方式1：字符串(了解即可)
    //压缩JS任务
    gulp.task(\'uglifyJS\', function () {
        return pipeline(
            gulp.src(\'js/*.js\'), //监听的目标原路径
            uglify(), //执行JS压缩任务
            rename(\'new.min.js\'), //给文件重命名
            gulp.dest(\'dist\') //任务执行完成后,新文件放在哪个文件夹下
    );
});

//方式2：回调函数
//压缩JS任务
gulp.task(\'uglifyJS\', function () {
    return pipeline(
        gulp.src(\'js/*.js\'), //监听的目标原路径
        uglify(), //执行JS压缩任务
    rename(function(path){
        //path本次重命名的文件信息
        console.log(path)
        //basename: 文件名
        //extname: 后缀名
        //path { dirname: \'.\', basename: \'a\', extname: \'.js\' }
        // basename + extname
        //修改输出文件名
        path.basename += \'.min\'
    }), //给文件重命名
    gulp.dest(\'dist\') //任务执行完成后,新文件放在哪个文件夹下
    );
});

gulp-less编译

安装：npm install gulp-less

var gulp=require("gulp");
var less = require(\'gulp-less\');
var path = require(\'path\');
gulp.task(\'less\', function () {
    return gulp.src(\'./less/*.less\')
    .pipe(less({
    paths: [ path.join(__dirname, \'less\', \'includes\') ]
}))
    .pipe(gulp.dest(\'./dist/css\'));
});

gulp-clean-css 压缩css

安装：cnpm i gulp-clean-css --save-dev

引入gulp模块：var gulp = require(\'gulp\');

引入重命名插件：var rename=require(\'gulp-rename\');

引入css压缩插件：var cleanCSS=require("gulp-clean-css");

//定义任务
gulp.task("default",function () {
    gulp.src("src/index.css")
    .pipe(cleanCSS())
    .pipe(gulp.dest("dist"))
});

gulp-imagemin 压缩图片

　　压缩图片可以减少，图片的体积，提高传输速度。

安装：cnpm i gulp-imagemin --save-dev

引入gulp模块：var gulp = require(\'gulp\');

引入重命名插件：var rename=require(\'gulp-rename\');

引入压缩插件：var imagemin=require("gulp-imagemin");

//定义任务
gulp.task("default",function () {
    gulp.src("src/img/b.png")
    .pipe(imagemin())
    .pipe(gulp.dest("dist/img"))
});

gulp.watch监控文件的变动

　　文件被修改的时候，我们就需要执行相关的任务，但是如果每次修改都要人为的来操作，未免过来繁琐，所以，gulp提供了一个watch方法，可以在文件被修改的时候通过回调执行任务。

引入gulp模块：var gulp = require(\'gulp\');

引入压缩插件：var uglify = require(\'gulp-uglify\');

//定义任务
gulp.task("uglifyJS",function () {
    gulp.src("src/*.js")
    .pipe(uglify())
    .pipe(gulp.dest("dist/js"))
});

gulp.task("default",function(){
    //参数1： 监听那些文件或者文件夹发生变化
    //参数2： 调用那个任务
    gulp.watch("src/*.js",["uglifyJS"]);
});

gulp 任务依赖

　　gulp.task(name[, deps], fn)

一个任务可以依赖其他任务，[deps]一个包含任务列表的数组，这些任务会在你当前任务运行之前完成。

//引入gulp模块
var gulp = require(\'gulp\');
//gulp.task(name[deps], fn)
//name 执行的任务
//deps 依赖的任务，先执行完成依赖任务再去执行任务本身
//fn 异步任务的回调函数

//任务1
gulp.task("task1",function(){
    console.log("任务1");
});

//任务2
//任务2依赖任务1，在任务1执行完成才执行
gulp.task("task2",["task1"],function(){
    console.log("任务2");
});

 

课后练习：使用gulp配置编译Less，执行css压缩，通过观察者看到热刷新效果的实例

//引入gulp核心模块
var gulp = require(\'gulp\');
//引入less编译插件
var less=require("gulp-less");
//引入重命名插件
var rename=require("gulp-rename");
//导入clean-css压缩插件
var cleanCss = require("gulp-clean-css");
//引入热刷新插件
var livereload=require("gulp-livereload");
//less编译和重命名的任务
gulp.task(\'lessTask\', function() {
    gulp.src("./css/less/*.less")
    .pipe(less())
    .pipe(rename({suffix:".min"}))
    .pipe(gulp.dest("./dist/minCss"))
});

//压缩css的任务：依赖less编译任务完成之后才执行
gulp.task("cleanCSSTask",["lessTask"],function(){
    gulp.src("./dist/minCss/*.min.css")
    .pipe(cleanCss())
    .pipe(gulp.dest("./dist/css"))
    .pipe(livereload()); //执行热刷新任务
});

//定义观察者和热刷新的监听
gulp.task("default",function() {
    //热刷新的监听
    livereload.listen();

    //观察者任务
    gulp.watch("./css/less/*.less",["cleanCSSTask"]);
});