gulp 使用初解

時間 2019-11-15

原文原文鏈接

gulp

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

npm install gulp -g

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

gulp 插件

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

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

del 和 gulp-clean

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

gulp-concat

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

gulp-minify-css

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

gulp-uglify

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

gulp-usemin

用來處理文件合併或者文件路徑修改後，html中的引入問題，實際使用時須要經過在html中增長註釋的方式來實現替換。npm

gulp-replace

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

gulp-rev和gulp-rev-collector

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

gulp-minify-html

html文件壓縮。

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');
var usemin = require('gulp-usemin');
var minifyHtml = require('gulp-minify-html');

定義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-usemin

結合usemin可能很好的解決路徑替換問題，增長配置的靈活性。

html文件中的配置

使用註解的方式能夠很靈活的編寫運行代碼，你只須要將想要提供的文件引用加入到註解範圍中來就行，,pipelineId是自定義的，<path>是你要定義的文件名稱和路徑。

<!-- build:css style.css -->
  <link rel="stylesheet" href="../assets/styles/style.css">
  <link rel="stylesheet" href="../assets/styles/public.css">
  <link rel="stylesheet" href="../assets/styles/jquery-ui-1.10.3.css">
  <!-- endbuild -->

  <!-- build:js js/jquery-1.11.1.min.js -->
  <script src="../assets/js/jquery-1.11.1.min.js"></script>
  <!-- endbuild -->
  <!-- build:js js/jquery-ui-1.10.3.js -->
  <script src="../assets/js/jquery-ui-1.10.3.js"></script>
  <!-- endbuild -->
  <!-- build:js js/bootstrap.js -->
  <script src="../assets/js/bootstrap.js"></script>
  <!-- endbuild -->

js代碼

usemin會自動合併多個文件，同時能夠結合其餘插件實現更多功能，注意多個pipelineId時，要使用function(){return}的方式，不然會報錯，因此建議，就直接用function(){return}來寫好了。使用usemin，我成功的將原來1500行代碼縮減到了130行，去掉了大量的文本替換，也將replace任務給去除掉了。

gulp.src('app/demo/*.html')  
    .pipe(usemin({
        css: [function () {return minifycss();}],
        html: [function () {return minifyHtml({ empty: true });}],
        js: [function () {return uglify();}]
      }
    ))
    .pipe(replace(/\.\.\/assets\//g, ''))    
    .pipe(replace(/\.\.\/images/g, 'images'))
    .pipe(gulp.dest(demoDir));

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/partners/*.html')  
    .pipe(usemin({
        css: [function () {return minifycss();}],
        // html: [ function () {return minifyHtml({ empty: true });} ],
        js: [ function () {return uglify();} ]
      }
    ))
    .pipe(replace(/\.\.\/assets\//g, ''))    
    .pipe(replace(/\.\.\/images/g, 'images')) 
  	.pipe(gulp.dest(partnerDir)); 

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

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

});


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

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

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