摘要：概念之前有寫(xiě)了，現(xiàn)在重新寫(xiě)感覺(jué)二者最終結(jié)果雖說(shuō)相差無(wú)幾，但是側(cè)重點(diǎn)還是有所不同更偏向于工程化，側(cè)重于項(xiàng)目的整個(gè)流程控制，你可以二者結(jié)合，也可以分開(kāi)取舍都有利于前端項(xiàng)目的工程化構(gòu)建安裝全局安裝作為項(xiàng)目的開(kāi)發(fā)依賴安裝在項(xiàng)目根目錄下創(chuàng)建一

之前有寫(xiě)了webpack， 現(xiàn)在重新寫(xiě)gulp感覺(jué)二者最終結(jié)果雖說(shuō)相差無(wú)幾，但是側(cè)重點(diǎn)還是有所不同
webpack更偏向于工程化，gulp側(cè)重于項(xiàng)目的整個(gè)流程控制，你可以二者結(jié)合，也可以分開(kāi)取舍 都有利于前端項(xiàng)目的工程化構(gòu)建

安裝
1、全局安裝

  $ npm install -g gulp 

2、作為項(xiàng)目的開(kāi)發(fā)依賴（devDependencies）安裝：

  $ npm install --save-dev gulp

3、 在項(xiàng)目根目錄下創(chuàng)建一個(gè)名為 gulpfile.js 的文件：

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

4、 運(yùn)行 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"));  // 寫(xiě)入 "build/somedir/somefile.js"

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

(2) gulp.task()

其實(shí)gulp就是不斷起一些任務(wù)函數(shù)，來(lái)運(yùn)行你的項(xiàng)目
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()

 用來(lái)接聽(tīng)任務(wù)函數(shù)，把要接聽(tīng)的任務(wù)傳入 啟動(dòng)的時(shí)候 會(huì)根據(jù)傳入的任務(wù)進(jìn)行執(zhí)行，當(dāng)然，不會(huì)按順序
 gulp.task("watch",function(){
    gulp.watch("./src/*.html",["copyhtml"])
    gulp.watch("./src/images/**/*",["copyimg"])
    gulp.watch("./src/styles/**/*.scss",["packscss"])
 }     

(4) 當(dāng)你想直接gulp啟動(dòng)項(xiàng)目的話，會(huì)使用

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

其實(shí)gulp常用的就是插件，下面介紹一下項(xiàng)目中常用的插件，從而幫你更高效的構(gòu)建項(xiàng)目
(1) 啟動(dòng)服務(wù)插件 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 : {   //啟動(dòng)項(xiàng)目顯示目錄
               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實(shí)現(xiàn)模塊化開(kāi)發(fā) 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) 解析瀏覽器不識(shí)別的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) 解析多個(gè)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 框架，專注于移動(dòng)端的scss npm i yo3 -D

在node_modules中找到y(tǒng)o3 復(fù)制style到項(xiàng)目src中 
習(xí)慣性的在style中創(chuàng)建app.scss 用來(lái)import一些需要的文件
，再在usage中創(chuàng)建模塊scss文件index.scss顯示頁(yè)面樣式
   
   .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"
       }
   ]    

好了 ，常用就這些了 如果有新的知識(shí)點(diǎn)后續(xù)還會(huì)補(bǔ)充.....