摘要：前端的發展真的是快，前幾年還是刀耕火種的開個編輯器，幾行和代碼就能上瀏覽器跑了。是啥官方的解釋是基于流的自動化構建工具。把運動的半成品看成是數據，那么流動的數據就是流。分工明確才能提高效率，這是社會發展的經驗總結。

前端的發展真的是快，前幾年還是刀耕火種的開個編輯器，幾行html和js代碼就能上瀏覽器跑了。現在呢？各種包，各種庫，各種框架，各種編程范式。究其原因，就是我們高中社會課本中那句話

人民日益增長的文質文化需求，同落后的社會生產之間的矛盾

想想也是，以前刀耕火種的編寫頁面效率非常低，而我國到目前為止網民的數量已經超過7億了，可想而知對網頁數量和多樣化的需求巨大，那有什么方法來提高頁面的生產效率呢？這就是我今天要講的基于gulp平臺的自動化生產平臺。
gulp是啥？官方的解釋是基于流的自動化構建工具。好，那什么是流呢？這個流是從英語單詞stream翻譯過來的，不過還是不好理解。其實可以這么理解，流就是工廠的一個生產車間生產出來的半成品，一個個半成品在輸送帶上送往下一個加工車間的過程。把運動的半成品看成是數據，那么流動的數據就是流。唉！好難解釋啊！還是看代碼吧。我已經把代碼上傳到github了，需要的同學自取，麻煩點個小星星 https://github.com/NicknameID...

由于npm在國內比較慢，所以推薦大家使用淘寶的cnpm，在國內訪問比較快（搞不懂國家為什么立堵墻，難受）。

-y的作用可以跳過詢問步驟直接生成默認的package.json文件

由于依賴包太多了，就不一個一個寫了 主要通過 cnpm install --save-dev 包的名字的方式來安裝的，
下圖所列的就是自動化工具要用的包，我已經上傳到github上了點擊這里獲取，
下載后只要 cnpm install就可以了，就會根據package.json里的依賴去下載安裝

在package.json中添加gulp字段方便調用本地安裝的gulp命令,到這里package.json配置好了

功能1---自動化生成項目目錄

//gulpfile.js
/*首先在全局上加載gulp，這個很重要*/
const gulp = require("gulp");
/*在全局上定義項目的目錄結構，供應后面使用*/
const dirs = {
  dist:"./dist",
  src: "./src",
  css: "./src/css",
  less: "./src/less",
  js: "./src/js",
  img: "./src/img",
};
gulp.task("create-directory", () => {
  const mkdirp = require("mkdirp"); //這里要依賴mkdirp這個包，通過cnpm 安裝
  for (let i in dirs) {
    mkdirp(dirs[i], err => {
      err ? console.log(err) : console.log("mkdir-->" + dirs[i]);;
    });
  }
});
//在終端運行cnpm run gulp create-directory

生成需要生成的項目目錄，再也不用每次都去手工創建了，幸福感爆棚有木有！！！

功能2---編譯less，并且實現less注入功能，熱更新頁面，方便開發時調試
這個功能要依賴的插件有

1.gulp-less
2.browser-sync
3.gulp-notify
4.gulp-plumber

/*全局定義要處理的文件*/
const files = {
  lessFiles: "./src/less/go.less",
  cssFiles: "./src/css/*.css",
  jsFiles: "./src/js/*.js",
  imgFiles:"./src/img/*.*"
}
//編譯less
gulp.task("compile-less", () => {
const less = require("gulp-less"); //依賴gulp-less的插件
const notify = require("gulp-notify"); 
const plumber = require("gulp-plumber");
const browserSync = require("browser-sync").create(); //browser-sync同步服務器
const reload = browserSync.reload; //將browser-sync的reload方法存起來，方便調用
  return gulp.src(files.lessFiles)
  .pipe(plumber({ errorHandler: notify.onError("Error: <%= error.message %>") })) //使用gulp-notify和gulp-plumber用來阻止因為less語法寫錯跳出監視程序發生
  .pipe(less())
  .pipe(gulp.dest(dirs.css + "/"))
  .pipe(reload({stream: true}));
});

// 本地服務器功能，自動刷新（開發環境）
gulp.task("server", ["compile-less"],()=>{
const browserSync = require("browser-sync").create();
const reload = browserSync.reload;
  browserSync.init({
    server: "./"
  });
  gulp.watch(dirs.less+"/**/*.less", ["compile-less"]); //監視less文件夾中的所有less文件，有改動就調用compile-less任務編譯less
  gulp.watch("./*.html").on("change", reload); //監視html文件，有改動就刷新瀏覽器
  gulp.watch(dirs.js+"/**/*.js").on("change", reload); //監視所有js文件有改動就刷新瀏覽器
});
//在cmd運行cnpm run gulp server

可以看到程序正在后臺運行，正在監聽文件改動

這樣就可以左邊開著編輯器寫代碼，右邊開著瀏覽器看效果了，有木有很爽，人生別無他求了（感動中！！！）

功能3---添加瀏覽器私有前綴
要用到的插件包

1.gulp-postcss
2.gulp-sourcemaps
3.autoprefixer

//添加瀏覽器私有前綴（生產環境）
gulp.task("autoprefixer", () => {
  const postcss = require("gulp-postcss");
  const sourcemaps = require("gulp-sourcemaps");
  const autoprefixer = require("autoprefixer");
  return gulp.src(files.cssFiles)
    .pipe(sourcemaps.init()) //添加sourcemap,方便調試
    .pipe(postcss([ autoprefixer() ])) //添加瀏覽器私有前綴，解決瀏覽器的兼容問題
    .pipe(sourcemaps.write("."))
    .pipe(gulp.dest(dirs.css+"/"))
});

功能4---壓縮css
要用到的插件包

1.gulp-minify-css
2.gulp-rename

// 壓縮css(生產環境)
gulp.task("minify-css", function () {
  const minifyCSS = require("gulp-minify-css");
  const rename = require("gulp-rename");
  return gulp.src(dirs.css+"/**/*.css")
    .pipe(minifyCSS({/*keepBreaks: true*/}))
    .pipe(rename(path=>path.basename += ".min")) //重命名文件輸出后的樣式為 原文件名.min.css
    .pipe(gulp.dest("./dist/css/"))
});

功能5---合并壓縮JavaScript文件
要用到的插件包

1.gulp-concat
2.gulp-uglify
3.gulp-rename

// js文件--合并--壓縮(生產環境)
gulp.task("js-concat-compress", (cb)=>{
  let name = ""; //先定義一個變量將用于后面存文件名
  const concat = require("gulp-concat");
  const uglify = require("gulp-uglify");
  const rename = require("gulp-rename");
  return gulp.src(dirs.js+"/**/*.js")
  .pipe(rename(path=>{path.basename += "";name=path.basename;}))
  .pipe(concat("bundle.js"))   //合并js文件
  .pipe(uglify())         //壓縮js文件
  .pipe(rename(path=>{
    path.basename = name+"."+path.basename+".min";  //改文件名加上 .min
  }))
  .pipe(gulp.dest("dist/js/")); 
});

功能6---圖片無損壓縮
要用到的插件包

1.gulp-imagemin

// 圖片無損壓縮
gulp.task("img-handl",()=>{
  const imagemin = require("gulp-imagemin");
  return gulp.src(files.imgFiles)
    .pipe(imagemin())  //imagemin()里是可以寫參數的，有需要的可以去github的頁面看看
    .pipe(gulp.dest("./dist/img/"))
});

功能7---項目的打包
有時候我們做完東西需要打包，方便傳輸，而有些文件又是不需要打包進去的，比如說node_modules文件夾，一鍵打包的快感體驗過絕對會愛上的

依賴的插件包
1.gulp-zip

// 項目打包(生產環境)
gulp.task("zip",()=>{
  const zip = require("gulp-zip");
  return gulp.src(["./*.html","**/dist/**/*.*","!**/node_modules/**/*.*"]) //這里需要注意的是，在寫要打包的文件時，避免打包的文件不能寫在開頭，這里"!**/node_modules/**/*.*"放在了最后
  .pipe(zip("project.zip"))   //打包后的文件名，自己隨意取
  .pipe(gulp.dest("./"))
});

因為gulp執行任務時是以最大的任務并發數同時進行的，所以有時候我們需要按步驟進行，就需要插件gulp-sequence，將任務按順序寫入，就會按順序執行
寫了這么多功能模塊，需要好好的整理一下，方便調用。我已經把完整的代碼上傳到github了，需要的同學自取，麻煩點個小星星 https://github.com/NicknameID...

// ------------------開發階段命令----------------------------------------------------
gulp.task("start", ["create-directory"]); //項目初始化的第一個命令
gulp.task("dev-watch", ["server"]); //開始編寫項目后開啟服務器實時更新

// ------------------生產階段命令------------------------------------------------------
gulp.task("prefixer", ["autoprefixer"]); //給css文件添加瀏覽器私有前綴 files.cssFiles ==>> .src/css/
gulp.task("min-css", ["minify-css"]); //壓縮css文件 files.cssFiles ==>> dist/css/
gulp.task("js-handl", ["js-concat-compress"]); //合js文件  dirs.js/**/*.js ==>> ./dist/js/concated.js
gulp.task("img-handl", ["img-handl"]) //處理圖片，對圖片進行無損的壓縮

//----------------一鍵生成項目文件命令-----------------------------------------------
       //因為gulp執行任務時是以最大的任務并發數同時進行的，所以有時候我們需要按步驟進行，就需要插件`gulp-sequence`，將任務按順序寫入，就會按順序執行
const runSequence = require("gulp-sequence").use(gulp);
gulp.task("bunld-project",runSequence("clean-dist","compile-less","autoprefixer","minify-css","js-concat-compress","img-handl","zip"))

看到沒有，使用gulp其實并沒有用到很多本身的API，都是通過不同的插件來實現的處理過程，所以gulp更加像一個處理平臺，而非大包大攬的處理程序，他只負責數據的流向，從pipe(管道)的這頭流向另外一頭，剩下的事情就交給各個插件了，像不像現代社會的細化分工。分工明確才能提高效率，這是社會發展的經驗總結。文章有點長，感謝看完的小伙伴！！！