摘要：概念之前有寫了，現在重新寫感覺二者最終結果雖說相差無幾，但是側重點還是有所不同更偏向于工程化，側重于項目的整個流程控制，你可以二者結合，也可以分開取舍都有利于前端項目的工程化構建安裝全局安裝作為項目的開發依賴安裝在項目根目錄下創建一

之前有寫了webpack， 現在重新寫gulp感覺二者最終結果雖說相差無幾，但是側重點還是有所不同
webpack更偏向于工程化，gulp側重于項目的整個流程控制，你可以二者結合，也可以分開取舍 都有利于前端項目的工程化構建

安裝
1、全局安裝

  $ npm install -g gulp 

2、作為項目的開發依賴（devDependencies）安裝：

  $ npm install --save-dev gulp

3、 在項目根目錄下創建一個名為 gulpfile.js 的文件：

   var gulp = require("gulp");
   gulp.task("default", function() {
     // 將你的默認的任務代碼放在這
   });

4、 運行 gulp：

   $ gulp

api
(1) gulp.src()

gulp.src("client/js/**/*.js") // 匹配 "client/js/somedir/somefile.js" 并且將 `base` 解析為 `client/js/`
  .pipe(minify())
  .pipe(gulp.dest("build"));  // 寫入 "build/somedir/somefile.js"

gulp.src("client/js/**/*.js", { base: "client" })
  .pipe(minify())
  .pipe(gulp.dest("build"));  // 寫入 "build/js/somedir/somefile.js"

(2) gulp.task()

其實gulp就是不斷起一些任務函數，來運行你的項目
gulp.task("copyplugin",function(){
    gulp.src("./src/plugin/**/*")
    .pipe(gulp.dest("./dev/plugin"))
 })

 gulp.task("packscss",function(){
    gulp.src("./src/styles/app.scss")
    .pipe(sass().on("error",sass.logError))
    .pipe(gulp.dest("./dev/styles"))
 })
....

(3) gulp.watch()

 用來接聽任務函數，把要接聽的任務傳入 啟動的時候 會根據傳入的任務進行執行，當然，不會按順序
 gulp.task("watch",function(){
    gulp.watch("./src/*.html",["copyhtml"])
    gulp.watch("./src/images/**/*",["copyimg"])
    gulp.watch("./src/styles/**/*.scss",["packscss"])
 }     

(4) 當你想直接gulp啟動項目的話，會使用

 gulp.task("default",["webserver","copyhtml","copyimg","copyplugin","packscss","packjs","watch"],
 function(){
    console.log("DONE")
})

其實gulp常用的就是插件，下面介紹一下項目中常用的插件，從而幫你更高效的構建項目
(1) 啟動服務插件 npm i gulp-webserver -D

配置：
   引入gulp
   var gulp = require("gulp")
   
   var webserver = require("gulp-webserver")
   
   gulp.task("webserver",function(){
       gulp.src("./dev")     //編譯后的根目錄
       .pipe(webserver({
           host : "localhost",
           port : 4000,
           directoryListing : {   //啟動項目顯示目錄
               enable : true,
               path : "./dev"
           },
           livereload : true
       }))
   })

(2) 編譯sass npm i gulp-sass node-sass -D

var sass = require("gulp-sass")

gulp.task("packscss",function(){
   gulp.src("./src/styles/app.scss")
   .pipe(sass().on("error",sass.logError))
   .pipe(gulp.dest("./dev/styles"))
   console.log("sass編譯啦")
})

(3) 編譯commenjs實現模塊化開發 npm i gulp-webpack -D

var webpack = require("gulp-webpack")

   gulp.task("packjs",function(){
       gulp.src("./src/scripts/app.js")
       .pipe(webpack({
           output : {
               filename : "app.js"  //輸出文件為 name.js
           },
           module : {        
               loaders :[      //加載器
                   {
                       test : /.js$/,    //指定加載文件的類型
                       loader : "imports-loader",  //用imports-loader解析
                       exclude : "./node_modules"  //排除不需要編譯的js文件
                   }
               ]
           }
       }))
       .pipe(gulp.dest("./dev/scripts"))
   })

(4) 解析瀏覽器不識別的require npm i imports-loader -D

       
  直接 $ gulp 即可
       bogon:guang_m macbook$ npm i imports-loader -D
       guang_m@1.0.0 /Users/macbook/Desktop/learning/third/guang_m
       └─┬ imports-loader@0.7.1 
         ├── loader-utils@1.1.0 
         └── source-map@0.5.7 
       
       npm WARN guang_m@1.0.0 No description
       npm WARN guang_m@1.0.0 No repository field.
       bogon:guang_m macbook$ gulp
       [15:01:40] Using gulpfile ~/Desktop/learning/third/guang_m/gulpfile.js
       [15:01:40] Starting "webserver"...
       [15:01:40] Webserver started at http://localhost:4000
       [15:01:40] Finished "webserver" after 21 ms
       [15:01:40] Starting "packscss"...

(5) 解析多個js文件 npm i vinyl-named -D

    gulp.src("./src/scripts/app.js")
    .pipe(name())
     .pipe(webpack({
       output: {
         filename: "[name].js"
       },
       module: {
         loaders: [
           {
             test: /.js$/,
             loader: "imports-loader",
             exclude: "./node_modules"
           }
         ]
       }

(6) 下載yo3 框架，專注于移動端的scss npm i yo3 -D

在node_modules中找到yo3 復制style到項目src中 
習慣性的在style中創建app.scss 用來import一些需要的文件
，再在usage中創建模塊scss文件index.scss顯示頁面樣式
   
   .m-index{
       height: 100%;
       @include flexbox();
       @include flex-direction(column);
       header{
           height: .44rem;
           background: #00b38a;
       }
       section{
           background: #fff;
           @include flex();
       }
       footer{
           height:.44rem;
           background: #f6f6f6;
   
       }
   }   

(7) 加載字符串模板 npm i string-loader -D

    loaders : [
       {
           test : /.js$/,
           loader : "imports-loader",
           exclude : "./node_modules"
       },
       {
           test : /.string$/,
           loader : "string-loader"
       }
   ]    

好了 ，常用就這些了 如果有新的知識點后續還會補充.....