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

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

安裝
1、全局安裝

  $ npm install -g gulp 

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

  $ npm install --save-dev gulp

3、 在項目根目錄下創(chuàng)建一個名為 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就是不斷起一些任務函數(shù)，來運行你的項目
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()

 用來接聽任務函數(shù)，把要接聽的任務傳入 啟動的時候 會根據(jù)傳入的任務進行執(zhí)行，當然，不會按順序
 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常用的就是插件，下面介紹一下項目中常用的插件，從而幫你更高效的構(gòu)建項目
(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實現(xiàn)模塊化開發(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) 解析瀏覽器不識別的require npm i imports-loader -D

       
  直接 $ gulp 即可
       bogon:guang_m macbook$ npm i imports-loader -D
       [email protected] /Users/macbook/Desktop/learning/third/guang_m
       └─┬ [email protected] 
         ├── [email protected] 
         └── [email protected] 
       
       npm WARN [email protected] No description
       npm WARN [email protected] 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中找到y(tǒng)o3 復制style到項目src中 
習慣性的在style中創(chuàng)建app.scss 用來import一些需要的文件
，再在usage中創(chuàng)建模塊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"
       }
   ]    

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