gulp

基於流（streaming）的方式構建，首先讀取檔案，編譯壓縮檔案（流的方式），最終將結果生成到配置的檔案目錄下。

安裝gulp

假設已經安裝了node 和npm （淘寶的cnpm很適合國內使用）。

1、首頁全域性安裝gulp。

1 npm install --global gulp 

2、其次區域性安裝gulp。（注：區域性安裝是安裝到你專案的根目錄，這是很多教程沒有清晰表明）

npm install gulp --save-dev

3、在專案根目錄下建立一個名為 gulpfile.js 的檔案

var gulp = require('gulp');

gulp.task('default', function
 
() {
  // 將你的預設的任務程式碼放在這
});

4、執行gulp。（預設的名為 default 的任務（task）將會被執行，想要單獨執行特定的任務（task），請輸入 gulp <task> <othertask>）

gulp

合併和壓縮JS、CSS檔案

壓縮JS，CSS檔案需要引用如下元件：

安裝元件專案目錄，通過cd 進入專案的根目錄，執行下邊的npm安裝元件

npm install  gulp-minify-css gulp-jshint gulp-uglify gulp-rename gulp-concat gulp-clean gulp-notify --save-dev

在上述 gulpfile.js 的檔案裡，寫入：

// 引入 gulp及元件
var gulp=require('gulp'),  //gulp基礎庫
    minifycss=require('gulp-minify-css'),   //css壓縮
    concat=require('gulp-concat'),   //合併檔案
    uglify=require('gulp-uglify'),   //js壓縮
    rename=require('gulp-rename'),   //檔案重新命名
    jshint=require('gulp-jshint'),   //js檢查
    notify=require('gulp-notify');   //
 
提示

gulp.task('default',function(){
    gulp.start('minifycss','minifyjs');
});
 
//css處理
gulp.task('minifycss',function(){
   return gulp.src('htdocs/kunpeng/static/css/*.css')      //設定css
       .pipe(concat('order_query.css'))      //合併css檔案到"order_query"
       .pipe(gulp.dest('dist/styles'))           //設定輸出路徑
       .pipe(rename({suffix:'.min'}))         //修改檔名
       .pipe(minifycss())                    //壓縮檔案
       .pipe(gulp.dest('dist/styles'))            //輸出檔案目錄
       .pipe(notify({message:'css task ok'}));   //提示成功
});

//JS處理
gulp.task('minifyjs',function(){
   return gulp.src(['/static/js/juicer-min.js','/static/js/bootstrap.min.js','/static/js/bootstrap-datetimepicker.min.js','/static/js/order_query.js'])  //選擇合併的JS
       .pipe(concat('order_query.js'))   //合併js
       .pipe(gulp.dest(''dist/js'))         //輸出
       .pipe(rename({suffix:'.min'}))     //重新命名
       .pipe(uglify())                    //壓縮
       .pipe(gulp.dest('dist/js'))            //輸出 
       .pipe(notify({message:"js task ok"}));    //提示
});

附一份最近用的配置

執行

gulp

2018-03-15新增:

 打包前刪除指定檔案: 

   外掛:  npm install gulp-clean --save-dev

  使用套路: 

 注意點:

  在執行clean 的時候，clean要放在上面因為這些任務是同步的，完全可能出現邊編譯邊刪除的情況
gulp.task('default', ['clean'], function(){
    gulp.start('cat', 'minifycss', 'copyHtml', 'copyPng', 'copyJson', 'copyIco');
});