gulp1.4.0使用笔记

gulp是一个前端开发工具，可以配置自动化构建工作，如：js的合并 压缩，css的合并 压缩，图片的压缩等。

相比于webpack，gulp更加灵活且适用于多页面应用。

------下面说明如何 创建一个项目-用gulp构建工作流------
 
*开发的源css,js,images存放于src文件夹，合并压缩后的css,js,images发布到build文件夹。

 步骤：
 1.项目根目录下新建package.json文件-命令：npm init -y
 2.修改package.json文件内容为如下：
   {
     "name": "channelProject",
     "version": "1.0.0",
     "description": "",
     "main": "index.js",
     "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1"
     },
     "keywords": [],
     "author": "",
     "license": "ISC",
     "devDependencies": {
       "babel-core": "^6.26.0",
       "browser-sync": "^2.18.13",
       "del": "^3.0.0",
       "gulp": "^3.9.1",
       "gulp-babel": "^7.0.0",
       "gulp-base64": "^0.1.3",
       "gulp-changed": "^3.1.0",
       "gulp-clean-css": "^3.9.0",
       "gulp-concat": "^2.6.1",
       "gulp-css-spriter": "^0.4.0",
       "gulp-imagemin": "^3.4.0",
       "gulp-less": "^3.3.2",
       "gulp-notify": "^3.0.0",
       "gulp-rename": "^1.2.2",
       "gulp-rev": "^8.0.0",
       "gulp-rev-collector": "^1.2.2",
       "gulp-uglify": "^3.0.0",
       "run-sequence": "^2.2.0",
       "vinyl-paths": "^2.1.0"
     }
   }
 3.项目根目录下新建gulpfile.js 文件-命令：touch gulpfile.js
 4.安装package.json中的模块-项目根目录下执行命令：npm install
 5.新增gulp任务内容到 gulpfile.js 文件，文件内容如下：
   var gulp         = require("gulp");
   var browserSync  = require("browser-sync");
   var reload       = browserSync.reload;       //刷新页面
   var less         = require("gulp-less");     //转化less到css
   var concat       = require("gulp-concat");   //合并文件
   var cleanCss     = require("gulp-clean-css");//压缩css
   var imagemin     = require("gulp-imagemin"); //压缩图片
   //var base64       = require("gulp-base64");   //把样式中使用的小图片转为base64
   //var spriter      = require("gulp-css-spriter"); //把样式中使用的小图片合成雪碧图 不流行
   var babel        = require("gulp-babel");    //把高版本js转为低版本
   var uglify       = require("gulp-uglify");   //压缩js
   var runSequence  = require("run-sequence");  //线性执行任务
   var notify       = require("gulp-notify");   //任务执行提示
   var rev          = require("gulp-rev");      //文件版本控制
   var revController= require("gulp-rev-collector"); //文件版本引入控制
   var rename       = require("gulp-rename");        //相对于.src(XX)中的源文件重命路径和文件名
   var changed      = require("gulp-changed");  //任务仅执行修改了的文件
   var fs           = require("fs");            //原生nodeJs的操作文件的模块
   var del          = require("del");           //删除文件 不建议使用
   var vinylPaths   = require("vinyl-paths");   //在管道中删除文件 不建议使用
   //注意：用命令增删文件都是异步的，命令执行完毕未必已完成了对文件的增删操作。

   /*配置gulp任务源、目标路径*/
   var src = {
       root: "./src/",
       css : "./src/css/",
       js  : "./src/js/",
       images : "./src/images/",
       html : "./src/"
   };
   var build = {
       root: "./build/",
       css : "./build/css/",
       js  : "./build/js/",
       images : "./build/images/",
       html : "./build/"
   };

   //处理图片：压缩->发布
   gulp.task("images", function () {
       gulp.src(src.images + "*.*")
           .pipe(imagemin())
           .pipe(gulp.dest(build.images));
   });

   //处理less：less->css
   gulp.task('less',function () {
       gulp.src(src.css + "*.less")
           .pipe(less())
           .pipe(gulp.dest(src.css))
           .pipe(reload({stream : true}))
           .pipe(notify("less -> css [<%= file.relative %>]")) //此处必须双引号
   });

   //处理css：css合并->压缩->生成新版本号
   gulp.task("css",function () {
       gulp.src(src.css + "*.css")      //源路径
           .pipe(concat('index.css'))   //合并后的css名称
           /*.pipe(base64({
           maxImageSize: 5 * 1024,  //5kb以下的图片会转为base64
           debug:true
           }))*/
           /*.pipe(spriter({
               'spriteSheet': './build/images/spritesheet.png',
               'pathToSpriteSheetFromCSS': '../images/spritesheet.png'
           }))*/

           .pipe(cleanCss({debug:true})) //压缩css
           .pipe(rev())                  //自动生成css文件版本号
           .pipe(gulp.dest(src.css))     //目标路径
           .pipe(gulp.dest(build.css))   //目标路径

           .pipe(rev.manifest())
           .pipe(gulp.dest("./rev"))     //生成css文件版本号更新版本映射文件

           .pipe(reload({stream:true}))
           .pipe(notify("css -> concat -> compress [<%= file.relative %>]"));

   });

   //处理js：js合并->压缩->生成新版本号
   gulp.task("js",function () {
       gulp.src([src.js + "a.js" , src.js + "b.js" ])
           .pipe(concat("index.js"))     //合并后的名称
           .pipe(gulp.dest(src.js));     //合并后先存到开发环境

       gulp.src(src.js + "index.js")
           /*.pipe(babel({
               presets : ['es2015']
            }))*/
           .pipe(uglify())                 //压缩js
           .pipe(rename("./index.js"))     //压缩后存储名称 该路径是相对于源文件index.js的提取路径
           .pipe(gulp.dest(build.js))      //目标路径
           .pipe(notify("js -> concat -> compress [<%= file.relative %>]"));
   });

   //处理html：更新引用资源的版本号->发布
   gulp.task("html", function () {
      fs.exists("./rev/rev-manifest.json", function (isExist) {
          var count = 0;
          if(isExist == true){
              gulp.src(["./rev/*.json" , src.html + "*.html"])
                  .pipe(changed(src.html + "*.html"))
                  .pipe(revController())       //版本映射
                  .pipe(gulp.dest(build.html)) //gulp.dest只能到文件夹路径
                  .pipe(reload({stream : true}));
          }else{
              if(count > 10){
                  return;
              }else{
                  runSequence("html");
                  count ++ ;
              }
          }
      })
   });

   //清除：清除build和版本映射文件 不建议使用
   gulp.task("clear", function () {
       del([build.root, "./rev/"]);
   });

   //综合任务
   gulp.task("default",  ['images','less', "css", "js", 'html'], function () {
       //runSequence(["images","less"], "css", "js", "html");
       browserSync.init({
           server : {
              baseDir : build.root
           },
           port : "8080"
       });
       gulp.watch(src.css + "*.less", ["images", "css", "html"]); //gulp.watch的起始路径最好不加./
       gulp.watch(src.html + "*.html", ["html"]);
   });

  6.项目根目录下执行命令:gulp

------ 附件 package.json ------

{
  "name": "channelProject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "browser-sync": "^2.18.13",
    "del": "^3.0.0",
    "gulp": "^3.9.1",
    "gulp-babel": "^7.0.0",
    "gulp-base64": "^0.1.3",
    "gulp-changed": "^3.1.0",
    "gulp-clean-css": "^3.9.0",
    "gulp-concat": "^2.6.1",
    "gulp-css-spriter": "^0.4.0",
    "gulp-imagemin": "^3.4.0",
    "gulp-less": "^3.3.2",
    "gulp-notify": "^3.0.0",
    "gulp-rename": "^1.2.2",
    "gulp-rev": "^8.0.0",
    "gulp-rev-collector": "^1.2.2",
    "gulp-uglify": "^3.0.0",
    "run-sequence": "^2.2.0",
    "vinyl-paths": "^2.1.0"
  }
}

------ 附件 gulpfile.js ------

var gulp         = require("gulp");
var browserSync  = require("browser-sync");
var reload       = browserSync.reload;       //刷新页面
var less         = require("gulp-less");     //转化less到css
var concat       = require("gulp-concat");   //合并文件
var cleanCss     = require("gulp-clean-css");//压缩css
var imagemin     = require("gulp-imagemin"); //压缩图片
//var base64       = require("gulp-base64");   //把样式中使用的小图片转为base64
//var spriter      = require("gulp-css-spriter"); //把样式中使用的小图片合成雪碧图 不流行
var babel        = require("gulp-babel");    //把高版本js转为低版本
var uglify       = require("gulp-uglify");   //压缩js
var runSequence  = require("run-sequence");  //线性执行任务
var notify       = require("gulp-notify");   //任务执行提示
var rev          = require("gulp-rev");      //文件版本控制
var revController= require("gulp-rev-collector"); //文件版本引入控制
var rename       = require("gulp-rename");        //相对于.src(XX)中的源文件重命路径和文件名
var changed      = require("gulp-changed");  //任务仅执行修改了的文件
var fs           = require("fs");            //原生nodeJs的操作文件的模块
var del          = require("del");           //删除文件 不建议使用
var vinylPaths   = require("vinyl-paths");   //在管道中删除文件 不建议使用
//注意：用命令增删文件都是异步的，命令执行完毕未必已完成了对文件的增删操作。

/*配置gulp任务源、目标路径*/
var src = {
    root: "./src/",
    css : "./src/css/",
    js  : "./src/js/",
    images : "./src/images/",
    html : "./src/"
};
var build = {
    root: "./build/",
    css : "./build/css/",
    js  : "./build/js/",
    images : "./build/images/",
    html : "./build/"
};

//处理图片：压缩->发布
gulp.task("images", function () {
    gulp.src(src.images + "*.*")
        .pipe(imagemin())
        .pipe(gulp.dest(build.images));
});

//处理less：less->css
gulp.task('less',function () {
    gulp.src(src.css + "*.less")
        .pipe(less())
        .pipe(gulp.dest(src.css))
        .pipe(reload({stream : true}))
        .pipe(notify("less -> css [<%= file.relative %>]")) //此处必须双引号
});

//处理css：css合并->压缩->生成新版本号
gulp.task("css",function () {
    gulp.src(src.css + "*.css")      //源路径
        .pipe(concat('index.css'))   //合并后的css名称
        /*.pipe(base64({
        maxImageSize: 5 * 1024,  //5kb以下的图片会转为base64
        debug:true
        }))*/
        /*.pipe(spriter({
            'spriteSheet': './build/images/spritesheet.png',
            'pathToSpriteSheetFromCSS': '../images/spritesheet.png'
        }))*/

        .pipe(cleanCss({debug:true})) //压缩css
        .pipe(rev())                  //自动生成css文件版本号
        .pipe(gulp.dest(src.css))     //目标路径
        .pipe(gulp.dest(build.css))   //目标路径

        .pipe(rev.manifest())
        .pipe(gulp.dest("./rev"))     //生成css文件版本号更新版本映射文件

        .pipe(reload({stream:true}))
        .pipe(notify("css -> concat -> compress [<%= file.relative %>]"));

});

//处理js：js合并->压缩->生成新版本号
gulp.task("js",function () {
    gulp.src([src.js + "a.js" , src.js + "b.js" ])
        .pipe(concat("index.js"))     //合并后的名称
        .pipe(gulp.dest(src.js));     //合并后先存到开发环境

    gulp.src(src.js + "index.js")
        /*.pipe(babel({
            presets : ['es2015']
         }))*/
        .pipe(uglify())                 //压缩js
        .pipe(rename("./index.js"))     //压缩后存储名称 该路径是相对于源文件index.js的提取路径
        .pipe(gulp.dest(build.js))      //目标路径
        .pipe(notify("js -> concat -> compress [<%= file.relative %>]"));
});

//处理html：更新引用资源的版本号->发布
gulp.task("html", function () {
   fs.exists("./rev/rev-manifest.json", function (isExist) {
       var count = 0;
       if(isExist == true){
           gulp.src(["./rev/*.json" , src.html + "*.html"])
               .pipe(changed(src.html + "*.html"))
               .pipe(revController())       //版本映射
               .pipe(gulp.dest(build.html)) //gulp.dest只能到文件夹路径
               .pipe(reload({stream : true}));
       }else{
           if(count > 10){
               return;
           }else{
               runSequence("html");
               count ++ ;
           }
       }
   })
});

//清除：清除build和版本映射文件 不建议使用
gulp.task("clear", function () {
    del([build.root, "./rev/"]);
});

//综合任务
gulp.task("default",  ['images','less', "css", "js", 'html'], function () {
    //runSequence(["images","less"], "css", "js", "html");
    browserSync.init({
        server : {
           baseDir : build.root
        },
        port : "8080"
    });
    gulp.watch(src.css + "*.less", ["images", "css", "html"]); //gulp.watch的起始路径最好不加./
    gulp.watch(src.html + "*.html", ["html"]);
});