Gulp学习笔记（二）

实战！

项目目录如下

已经新建了gulpfile.js了

有以下的事情需要做：

• 在编写代码的过程中自动化编译scss文件并传入css文件夹中
• 完成时对css，js，html文件进行压缩，并为文件名md5命名
• ps: 此项目不需要进行css合并，因为在编写scss时已经合并在一起了

---

1. 自动化编译scss

需要用到的插件

=====> gulp-sass <=====
<= 用来编译scss代码

=====> gulp-plumber <=====
<= 如果编译过程出错的话进程会终止，这个插件就可以让它再次启动，不需要人工操作

实现代码

//gulpfile.js

    const gulp = require('gulp'),
          sass = require('gulp-sass'),
          plumber = require('gulp-plumber');

    gulp.task('scss',function(){
        return gulp.src('./src/sass/**/*.scss')
                   .pipe(plumber()) //防止编译出错时的进程退出
                   .pipe(sass({
                        outputStyle:'compressed' //编译，同时压缩css代码
                    }))
                    .pipe(gulp.dest('./src/css/'));//输出至指定位置                
    });
    //监听gulp.watch第一个参数位置制定文件的变化，发生变化则执行第二个参数的任务
    //即：编写scss时保存一下gulp就自动帮你编译一次，不用手动执行 gulp scss
    //但是如果编译发生问题的话watch就会终止，你必须再次手动启动，这是就看出plumber的作用了

    gulp.task('watch',function(){
        gulp.watch('./src/sass/**/*.scss',['scss']);
    });

    //一般在终端执行gulp任务都是 "gulp + 任务名"，但是如果指定任务名为 "default" 的话，就只用输入 "gulp" 就行了
    gulp.task('default',['scss','watch']);

保存文件，在项目根目录下输入 gulp，就去写scss啦，别的就不用烦了

---

2. 对文件名打md5码, 对html，js进行压缩

需要用到的插件

=====> gulp-rev <=====
<= 对文件名打md5码

=====> gulp-rev-collector <=====
<= 对html，css里”src” ,”href”, “url” 中路径的文件名进行修改，因为打完md5后文件名都变了

=====> gulp-minify-html <=====
<= 对html代码进行压缩

=====> gulp-uglify <=====
<=对js代码进行压缩

注意！！！！！

因为gulp是基于nodejs的，而nodejs又是异步的，所以…..，举个例子吧

//用gulp新建了三个任务
    gulp.task('a',function(){});
    gulp.task('b',function(){});
    gulp.task('c',function(){});

//这是书写默认任务
    gulp.task('default',['a','b','c']);

//在终端执行 'gulp'

这时，这三个任务是同时进行的，而不是以a，b，c的顺序！！！！！

如果需要让任务有顺序地完成，可以用到 ‘gulp.task()’ 的第二个参数（第一个参数是任务名，第三个是任务的具体内容，就是function）

第二个参数填写在此任务执行前需要完成的任务名，其实可以看一下第一段代码中 ‘default’ 任务的写法，第二个参数就是现在说的（[‘a’,’b’,’c’]，在执行完这三个任务后再执行 ‘default’ 任务，当然，’default’ 没有任务内容）

如果希望以 ‘a’, ‘b’, ‘c’ 的顺序执行的话，需要这么写

//注意，最好写返回值，因为执行是否成功是是否继续执行下一个任务的依据，不过不写也没问题，不过可能出错不会被发现
    gulp.task('a',function(){
        return //code 
    });

    gulp.task('b',['a'],function(){
        return //code
    });

    //最后一个不需要返回值
    gulp.task('c',['b'],function(){});

那么，这个项目的gulpfile.js应该怎么写呢

• 首先，为文件打md5码
• 然后，为html，css里的路径修改文件名
• 最后，压缩输出代码

额外准备：

• 在源文件目录下新建rev文件夹，原因最后再说
• 在项目根目录下新建result文件夹，用于存储输出处理结果

    const rev = require('gulp-rev'),
          jsUglify = require('gulp-uglify'),
          minifyHtml = require('gulp-minify-html'),
          revCollector = require('gulp-rev-collector');

//首先，为img文件下的图片打码
    gulp.task('img',['scss'],function(){
     return gulp.src('./src/img/**/*') //获取文件
                .pipe(rev()) //打码
                .pipe(gulp.dest("../result/img/")) //将处理完的图片传输至结果文件夹
                .pipe(rev.manifest())  //这一行以及在一行的作用最后解释
                .pipe(gulp.dest('./src/rev/img')); 
});

//其次，为css文件中的图片文件名修改名称,即修改url路径
    gulp.task('cssUrl',['img'],function(){
    return gulp.src(['./src/rev/**/*.json', './src/css/*.css']) //这一句最后解释
               .pipe( revCollector())
               .pipe( gulp.dest('./src/css/') );
});

//然后，为css文件名打码，并输出至指定位置（此时css已经是压缩文件了，因为在scss编译时已经为其压缩了）
    gulp.task('css',['cssUrl'],function(){
        return gulp.src('./src/css/*.css')
                .pipe(rev())
                .pipe(gulp.dest("../result/css/"))
                .pipe(rev.manifest())
                .pipe(gulp.dest('./src/rev/css'));
});

// 同时，压缩js文件并为其文件名打码，并输出至指定位置
    gulp.task('js',function(){
    return gulp.src('./src/js/*.js')
                .pipe(jsUglify())
                .pipe(rev())
                .pipe(gulp.dest("../result/js/"))
                .pipe(rev.manifest())
                .pipe(gulp.dest('./src/rev/js'));
});

//最后，在为js与css文件名打完md5码后，修改html中 对js与css引用的 'src' 与 'href' 路径，并对其压缩，输出至指定位置（ps:此项目就一个html文件）
    gulp.task('rev',['css','js'],function(){
    gulp.src(['./src/rev/**/*.json', './src/*.html'])
        .pipe( revCollector())
        .pipe( minifyHtml({
            empty:true,
            spare:true
        }) )
        .pipe( gulp.dest('../result/') );

});

//最后的最后，指定默认任务，这是可有可无的
gulp.task('default',['rev']);

//保存，在终端执行 'gulp' ，完成！！

---

那么，上面还有一些疑问没有解决，这都牵涉这都牵涉到’rev.manifest()’方法和 ‘gulp-rev-collector’ 的运作方法

• 首先，这个方法会生成.json 文件，用于存储修改前文件所在的路径名和加了md5码后文件的路径名，这就是一开始新建rev文件夹的原因，打开文件夹中的文件，会是这样

• 然后，‘gulp-rev-collector’ 会读取其中的数据，对css／html的路径进行修改

---

就这样，第一次gulp实战结束了，其实一开始没搞清楚那个异步的问题，导致css文件中url路径修改一直不成功，虽然以前也写过笔记的但是还是忘记了，看来还需要多多复习

至于好像还有可以实时刷新的插件就没装了，那个也是要保存才能刷新，就是省去了切屏刷新的过程