gulp——用自動化構建工具加強你的工做流程

gulp概念

以前有寫了webpack， 如今從新寫gulp感受兩者最終結果雖然說相差無幾，可是側重點仍是有所不一樣
webpack更偏向於工程化，gulp側重於項目的整個流程控制，你能夠兩者結合，也能夠分開取捨 都有利於前端項目的工程化構建

• 安裝
  一、全局安裝

  $ npm install -g gulp

  二、做爲項目的開發依賴（devDependencies）安裝：

  $ npm install --save-dev gulp

  三、 在項目根目錄下建立一個名爲 gulpfile.js 的文件：

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

  四、 運行 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'
         }
     ]

  好了 ，經常使用就這些了 若是有新的知識點後續還會補充.....