gulp常用功能集合（开发和生产分离、静态资源压缩优化、代码优化、实时预览、hash）

摘要：在资源很多时，例如图片的复制，这个会加快任务的执行速度，特别是需要实时预览时，减少延迟。但是作为个入门短时间内还是不能够被取代得了的。

tags: gulp 前端自动化开发

npm仓库下载地址
https://www.npmjs.com/package/cddgulp

[TOC]
本人自用在此基础上的一个完整自用框架——cddgulp
npm点这里
github点这里
另一个基于vuepack改写的自用的webpack2.x+vue2.x的实时预览前端脚手架,点这里

html文件复制、自动更改hash文件链接、文件内容替换

css文件复制与hash

img文件的复制与hash

js文件的复制、压缩、合并、重命名、hash

对文件的监视与自动更新

其他配合项包括compass/sas预编译，browser-sync实时预览

 "devDependencies": {
    "del": "^2.2.1",
    "gulp": "^3.9.1",
    "gulp-cached": "^1.1.0",
    "gulp-changed": "^1.3.1",
    "gulp-clean-css": "^2.0.12",
    "gulp-concat": "^2.6.0",
    "gulp-csscomb": "^3.0.7",
    "gulp-htmlmin": "^2.0.0",
    "gulp-imagemin": "^3.0.2",
    "gulp-replace": "^0.5.4",
    "gulp-rev": "^7.1.0",
    "gulp-rev-collector": "^1.0.5",
    "gulp-uglify": "^2.0.0"
  }

1.del
: 该插件不是gulp的插件而是node的插件或者一个功能，作用是删除文件/文件夹。

2.gulp
: 这个就不用多说了，本地gulp插件

3.gulp-cached
: 这个插件用来对文件进行复制时，只是对那行更改过的文件进行复制，减少不必要的资源操作。在资源很多时，例如图片的复制，这个会加快gulp任务的执行速度，特别是需要实时预览时，减少延迟。

4.gulp-changed
: 这个插件跟gulp-cacahed插件类似，他主要是在对文件进行复制时，如果该文件没有改动过，那么就不允许该文件复制到目标文件件。（自己实测时看不出来，而且如果使用cached,就不用使用这个了）

5.gulp-clean-css
: 用来对css文件进行去注释，和压缩

6.gulp-concat
: 对文件进行合并，而且可以添加一个string参数，用来对合并的文件进行重命名

7.gulp-csscomb
: 对css进行版本支持

8.gulp-htmlmin
: 对html文件进行压缩，如去换行，去注释等

9.gulp-imagemin
: 对jpg、png等格式问的图片进行无损的压缩（特别有用，但是在你的node-modules中的插件过多时会存在图片压缩过慢的问题问题）

10.gulp-replace
: 用来替换文本文件中的内容

11.gulp-rev
: 对文件进行hash命名，并且生成对应的json文件

12.gulp-rev-collector
: 结合gulp-rev对hash的文件在html文件中进行引用路径更改

13.gulp-uglify
: 对js文件进行压缩，有人叫这个作“丑化”，确实挺丑的

本人没有在gulpfile.js文件使用实时预览的插件，因为这些任务已经很多了，gulp虽然速度很快，但是执行时也会有些迟缓，所以只是外部使用了browser-sync实时预览。

此外css预编译我使用的是sass，在集成到gulp预编译时如果出现了错误的语法，整个gulp监视任务就会完全停止，所以我是用的是外部sass监视。这个可以跟gulp一块使用，gulp只是监视css文件，然后进行自己的操作即可，二者各自做各自的事，出错了也不会有中断这样的影响。

我的开发目录

源文件gulpfile.js 提取码：aea6

var gulp = require("gulp");
var    changed = require("gulp-changed");
var    concat = require("gulp-concat");
var    htmlmin = require("gulp-htmlmin");
var    imagemin = require("gulp-imagemin");
var    uglify = require("gulp-uglify");
var    cleanCss = require("gulp-clean-css");
var cache = require("gulp-cached");
var rev = require("gulp-rev");
var replace = require("gulp-replace");
var del = require("del");
var revCollector = require("gulp-rev-collector");

: 代码如下

//对常用的东西进行变量化


var dir = "../dist";    //对目标根目录进行变量

gulp.task("copyHtml", function(){
    gulp.src("*.html")      //当前目录的HTML文件
    .pipe(cache("copyHtml"))       //只对修改的文件进行复制
    //.pipe(changed(dir))//只有变化的文件能够通过
    .pipe(htmlmin({collapseWhitespace: true,
        removeComments: true
    }))     //对html文件进行压缩处理，去换行，去注释
    .pipe(replace("a.js","main.js"))        //对html文件中的指定的文字进行替换
    .pipe(gulp.dest(dir));      //复制到目标文件
});

: 代码如下

gulp.task("copyCss",function(){
    del([dir+"/css/**/*"],{force: true});   //  由于每次更改css文件，进行hash的话旧的文件就会残留，因此每次写入前需要进行清空。
    gulp.src("css/main.css")
    // .pipe(changed(dir+"/css"))
    .pipe(cleanCss({conpatibility: "ie8"}))     //进行压缩
    .pipe(rev())        //进行hash
    .pipe(gulp.dest(dir+"/css"))        
    .pipe(rev.manifest())       //产生hash对应的json文件
    .pipe(gulp.dest(dir+"/css"));
});

: 代码如下

gulp.task("copyImg", function () {
    gulp.src("img/*")
    .pipe(cache("copyImg"))     
    // .pipe(changed(dir+"/img"))
    .pipe(imagemin())   //对图片进行压缩
    .pipe(rev())
    .pipe(gulp.dest(dir+"/img"))
    .pipe(rev.manifest())
    .pipe(gulp.dest(dir+"/img"));
});

: 代码如下

gulp.task("copyJs", function(){
    del([dir+"/js/**/*"],{force: true});    //与css同理删除
    gulp.src("js/*.js")
    .pipe(cache("copyJs"))
    .pipe(concat("main.js"))    //对js文件进行合并和重命名
    .pipe(uglify())        //对合并后的文件进行压缩
    .pipe(rev())
    .pipe(gulp.dest(dir+"/js"))
    .pipe(rev.manifest())
    .pipe(gulp.dest(dir+"/js"));
});

: 代码如下

gulp.task("rev",function(){
      gulp.src([dir+"/**/*.json", dir+"/*.html"])     //找到json，和目标html文件路径
     .pipe(revCollector({
         replaceReved: true,
         // dirReplacements: {
         //     "a.js":"main.js"
         // }这里主要是对文件路径中的文字进行修改
     }))     //进行替换
     .pipe(gulp.dest(dir));
 });
 

: 代码如下

gulp.task("watch",function(){
    gulp.watch("*.html", ["copyHtml"]);     //监视html文件，如果发生变化就进行复制
    gulp.watch("css/main.css", ["copyCss"]);       //监视css文件，如果发生变化就进行复制
    gulp.watch("img/*.{jpg,png}",["copyImg"]);      //监视图片，如果发生变化就进行复制
    gulp.watch("js/*.js", ["copyJs"]);      //监视js文件，如果发生变化就进行复制
    gulp.watch(dir+"/{**/*.json,/*.html}", ["rev"])     //监视json文件和html文件，如果发生变化就进行hash命名，和引用更改
});

: 代码如下

gulp.task("default",["copyHtml","copyCss","copyImg","copyJs","watch"]
);

: 代码如下

gulp.task("cleanCache", function(){
    delete cache.caches["copyHtml","copyImg","copyJs"];
})      //由于cache不会自动清除缓存的东西，所以需要手动消除


gulp.task("lastWorks",["cleanCache"] );

: 代码如下慎用

 gulp.task("clean", function(){
     del(["../dist/**/*"],{force: true});
 });        //清除dist中所有的文件和文件夹，适合新的项目开始时使用

: 代码如下

 gulp.task("packageProject",function(){
     var zip = require("gulp-zip"); 
     var fileName = "projectNew_0.zip";
     gulp.src(["../dist/**/*","!../dist/{css,js,img}/*.json"])      //找到目标文件夹并且进行去除json文件处理
     .pipe(zip(fileName))        //对文件进行压缩和重命名
     .pipe(gulp.dest("../../projectNew"));       //压缩到指定文件夹
 });

现在流行的webpack包管理软件又要读前端进行革命了。但是gulp作为个入门短时间内还是不能够被取代得了的。

点击这里