gulp 使用介紹

gulp 使用介紹

• gulp
• gulp 插件
• gulp的配置文件gulpfile.js
• gulp 語法
• gulp 實例
• gulp的缺點

gulp

gulp是基於Node.js的前端自動化構建工具，主要用於代碼打包。目前主流的前端打包工具，grunt，gulp，webpack。grunt如今彷佛慢慢被gulp取代，而我使用gulp也是衝着你們說的配置簡單去的，至於通道流，運行文件什麼的其實仍是次要的；webpack如今很火，據說功能強大，沒有用過。

npm install gulp -g

注意須要在npm全局中安裝gulp，不然命令窗口中找不到gulp快捷命令，記得檢查環境變量的配置狀況。

gulp 插件

gulp的使用離不開gulp插件的使用，下面是經常使用的幾款。

npm install del gulp gulp-concat gulp-minify-css gulp-replace gulp-uglify gulp-rev gulp-rev-collector --save-dev

• del 和 gulp-clean

  del是node.js的插件，二者的效果類似，都是用來清除文件。至於爲何使用 del，而不是 gulp-clean，我是看到網上一篇文章推薦的。

• gulp-concat

  gulp-concat用來作文件合併，能夠將多個文件合併成一個文件，減小靜態資源數量。

• gulp-minify-css

  gulp-minify-css是css的壓縮工具。

• gulp-uglify

  gulp-uglify是js的壓縮工具。官方文檔上是這麼寫的 「Minify files with UglifyJS.」

• gulp-replace

  gulp-replace是一個文本修改插件，咱們通常用來作文件內容的的修改，經常使用的是路徑修改。

• gulp-rev和gulp-rev-collector

  gulp-rev和gulp-rev-collector，並無用到，這裏只作標示。這兩個插件能夠用來處理文件名，同時生成一個json文件保存修改前的文件名和修改後的文件名，而且自動處理文件中的修改，例如圖片文件至於css文件。

• gulp-connect

  gulp-connect : 這個插件會啓動一個 Http Server (with LiveReload)。

gulp的配置文件gulpfile.js

gulp依賴於配置文件gulpfile.js，在運行目錄下須要手動建立gulpfile.js，gulp的任務執行代碼會調用gulpfile.js。

gulp 語法

gulp的語法很簡單，功能實現依賴於各類插件，因此學習上成本很低。gulp的語法其實就是是nodejs的語法。

• 聲明依賴的插件

var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var del = require('del');
var replace = require('gulp-replace');

• 定義任務（task）

gulp.task('taskName', function() {

});

//default是默認task，當命令行缺省調用時會執行default任務。
gulp.task('default', []);

• 命令行調用任務（task）

gulp taskName // 直接調用具體的task
gulp    //調用默認的default，若是沒用會報錯

• 多個任務合併

  gulp.task('default', ['task1', 'task2', 'task3', 'task4']);

   

• 文件拷貝語法

  gulp.src('oldPath/images/*.*')
    .pipe(gulp.dest(newPath+'/images'));

• 文件合而且壓縮語法

  //css文件
  gulp.src(['app/assets/styles/style.css',
            'app/assets/styles/public.css',
            'app/assets/styles/page.css',
            'app/assets/styles/jquery-ui-1.10.3.css'])
    .pipe(concat('style.css'))
    .pipe(minifycss())
    .pipe(gulp.dest(newPath));
  //js文件
  gulp.src([
        'app/components/*/*.js'
    ])
    .pipe(concat('components.js'))
    .pipe(uglify())
    .pipe(gulp.dest(newPath));

• 文本修改

  gulp.task('demo-replace', function(){
    gulp.src(demoDir+'/index.html')  
      .pipe(replace('<link rel="stylesheet">', ''))  //刪除
      .pipe(replace(/\.\.\/assets\//g, ''))                //正則替換
      .pipe(replace(/\.\.\/images/g, 'images'))  
      .pipe(gulp.dest(newPath));

• 目錄清理

  gulp.task('clean', function(cb){
    del(rootPath, cb);
  });

gulp 實例

var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var del = require('del');
var replace = require('gulp-replace');

var root = 'dist';
var partnerDir = root + '/partners';

gulp.task('partners', function() {
    gulp.src('app/assets/images/*.*')
        .pipe(gulp.dest(partnerDir+'/images'));
    gulp.src(['app/assets/styles/style.css',
              'app/assets/styles/public.css',
              'app/assets/styles/page.css',
              'app/assets/styles/jquery-ui-1.10.3.css'])
        .pipe(concat('style.css'))
        .pipe(minifycss())
        .pipe(gulp.dest(partnerDir));

    gulp.src(['app/assets/js/jquery-1.11.1.min.js',
            'app/assets/js/jquery-ui-1.10.3.js',
            'app/assets/js/bootstrap.js',
            'app/assets/js/echarts.js'])
        .pipe(uglify())
        .pipe(gulp.dest(partnerDir+'/js'));
    gulp.src('app/partners/modules/*/*.html')
        .pipe(gulp.dest(partnerDir+'/modules'));

    gulp.src([
        'app/bower_components/angular/angular.js',
        'app/bower_components/angular-ui-router/release/angular-ui-router.min.js',
        'app/bower_components/angular-resource/angular-resource.js',
        'app/bower_components/angular-cookies/angular-cookies.js',
        'app/bower_components/angular-messages/angular-messages.min.js'
        ])
        .pipe(uglify())
        .pipe(gulp.dest(partnerDir+'/bower_components'));

    gulp.src([
            'app/components/services/*.js',
            'app/components/directives/*.js'
        ])
        .pipe(concat('components.js'))
        .pipe(uglify())
        .pipe(gulp.dest(partnerDir));

    gulp.src(['app/partners/modules/*/*.js',
        .pipe(concat('modules.js'))
        .pipe(uglify())
        .pipe(gulp.dest(partnerDir));

    gulp.src('app/partners/*.js')
        .pipe(uglify())
        .pipe(gulp.dest(partnerDir))
    gulp.src('app/partners/*.html')
        .pipe(gulp.dest(partnerDir))
});

gulp.task('partners-replace', function(){
    gulp.src(partnerDir+'/index.html')  
        //styles
        .pipe(replace('<link rel="stylesheet" href="../assets/styles/public.css">', ''))    
        .pipe(replace('<link rel="stylesheet" href="../assets/styles/jquery-ui-1.10.3.css">', ''))   
        .pipe(replace('<link rel="stylesheet" href="../assets/styles/style.css">', '<link rel="stylesheet" href="style.css">'))   
        //bower_components
        .pipe(replace('<script src="../bower_components/angular/angular.js"></script>', 
                                    '<script src="bower_components/angular.js"></script>'))    
        .pipe(replace('<script src="../bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>', 
                                    '<script src="bower_components/angular-ui-router.min.js"></script>'))    
        .pipe(replace('<script src="../bower_components/angular-resource/angular-resource.js"></script>', 
                                    '<script src="bower_components/angular-resource.js"></script>'))    
        .pipe(replace('<script src="../bower_components/angular-cookies/angular-cookies.js"></script>', 
                                    '<script src="bower_components/angular-cookies.js"></script>'))    
        .pipe(replace('<script src="../bower_components/angular-messages/angular-messages.min.js"></script>', 
                                    '<script src="bower_components/angular-messages.min.js"></script>'))
        //components   
        .pipe(replace('...', '<script src="components.js"></script>'))    
        //modules
        .pipe(replace('...', '<script src="modules.js"></script>'))    

        .pipe(gulp.dest(partnerDir)); 


  gulp.src(partnerDir+'/*.*')  
      .pipe(replace(/\.\.\/assets\//g, ''))    
      .pipe(replace(/\.\.\/images/g, 'images'))  
      .pipe(gulp.dest(partnerDir)); 

  gulp.src(partnerDir+'/modules/*/*.html', { base: 'modules' })  
      .pipe(replace(/\.\.\/assets\//g, ''))    
      .pipe(replace(/\.\.\/images/g, 'images'))  
      .pipe(gulp.dest('modules')); 

})

gulp.task('clean', function(cb){
    del(root, cb);
});

gulp.task('replace',[ 'partners-replace']);

gulp.task('default', [ 'partners']);

gulp的缺點

• 問題很難定位，運行中間沒有辦法debug，console.log() 也不能很好的定位問題。
• task串行執行有問題。

--20161125 補充------------------------

task 串行執行沒有問題，當前一些細節沒有注意到。每一個 task 的 function 是都要有 return 的。沒寫 return 就會發現有時候會出錯。