詳解常用的gulp命令

gulp.js是一款自動化構建工具，我們經常使用它在開發過程自動執行常見的任務。gulp.js 是基於 Node.js 構建的,利用 Node.js,可以快速構建項目。

由於gulp使用基於node，所以首先要安裝node環境。node.js有很多非常強大的作用，本文主要應用其環境以及把它當成一款包管理器來使用

使用gulp來構建項目，其步驟為：

1.在目錄中創建dist文件夾（要發布的代碼）

                    src文件夾（開發代碼）

2.在根目錄下寫命令行 初始化：npm init ,此時根目錄會出現package.json

3.局部安裝gulp

npm install gulp --save-dev

4.創建gulpfile.js文件 與dist和src同級

  配置信息：

 首先引入：

           var gulp = require("gulp")

（1）若想把src中的圖片壓縮至dist中

       首先需要引入：

var imgin = require("gulp-imagemin")

其中gulp-imagemin為圖片壓縮的gulp插件，在require之前，首先需要在命令中 npm install下來

       其次創建gulp任務 

gulp.task("copyimg",function(){

     return 
              gulp.src("src/img/images/**/*").
              pipe(imgin()).
              pipe(gulp.dest("dist/images"));                               
  })

其中copyimg為任務名，gulp.src（）中為要操作的圖片，pipe()中是要執行的，imgin是上面定義的壓縮圖片插件的名，gulp.dest()為要將圖片移動到的文件夾

（2）若想把src的所有js文件合並成一個js文件且放入dist下

首先，先引入

var uglify = require("gulp-uglify");
var concat = reqiire("gulp-concat");
var rename = require("gulp-rename");

其中 gulp-uglify 用來壓縮js ,gulp-concat 用來合並js,gulp-rename用來重命名.同理在require之前需要 npm install ....

其次，創建gulp任務

gulp.task("copyjs",function(){
    return
       gulp.src("/src/js/**/*").
          pipe(concat("all.js")).
          pipe(uglify()).
          pipe(rename("all.min.js")).
          pipe(gulp.dest("dist/js"))
})

 這個任務意思就是把src/js/下的所有文件合並起來，叫all.js。再將all.js壓縮，之后重命名為all.min.js,將此js放入dist/js/下

（3）若想將css文件壓縮，新增一個hash值，放到dist文件下

var minifycss = require("gulp-minifycss");
var rev = require("gulp-rev")

其中gulp-minifycss 用來壓縮css文件 ，gulp-rev用來給靜態資源文件加上一個hash值，同理注意使用 npm install ...下載插件

gulp.task("copycss",function(){
        return
           gulp.src("src/css/**/*").
           pipe(minifycss()).
           pipe(rev()).
           pipe(gulp.dest("dist/css")).
           pipe(rev.manifest()).
           pipe(gulp.dest("dist/css"));

})

此任務將src/css里的所有文件壓縮並生成hash后綴名。rev.manifest()是會生成一個json，里面存儲的是文件原名和生成hash文件名的對應。最后將文件放到dist/css下

（4）若想html文件壓縮並放入dist下

var htmlmin = require("gulp-htmlmin");

其中gulp-htmlmin用來壓縮html文件

gulp.task("copyindex",function(){
    return 
       gulp.src("src/client/**/*").
        pipe(htmlmin({
          removeComments:true,
          collapseWhite:true,
          collapseBooleanAttributes:true,//省略布爾屬性的值，如<input checked="true"/> ==> <input />
          removeEmptyAttributes: true,//刪除所有空格作屬性值 <input id="" /> ==> <input />
 removeScriptTypeAttributes: true,//刪除<script>的type="text/javascript"
 removeStyleLinkTypeAttributes: true,//刪除<style>和<link>的type="text/css"
 minifyJS: true,//壓縮頁面JS
 minifyCSS: true//壓縮頁面CSS

         })).pipe(gulp.dest("dist/client"))

})

 此task用來壓縮html頁面，有很多選項可選擇，如上注釋

（5）若css文件用了gulp-rev。則html文件在使用時需要動態更改引入的css文件名

var revCollector = require("gulp-rev-collector");

gulp-rev-collector根據rev生成的json文件用來替換html 中的<link href=""/>

gulp.task("rev-collector",function(){
    return 
            gulp.src(["dist/css/**/*.json","dist/client/*.html"]).
            pipe(revcollector({replaceReved:true})).
            pipe(gulp.dest("dist/client"));
})

其中設置replaceReved標識, 用來說明模板中已經被替換的文件是否還能再被替換,默認是false

(6)若想自動監聽

gulp.task("watch",function(){
  gulp.watch("src/index.html",["copyindex"]);
  gulp.watch("src/images/**/*",["copyimg"])
})

此任務對src下的index.html的文件監聽任務名為copyindex的任務，同時對src/images下的所有圖片監聽copyimg這個任務

（7）創建服務器

var connect =   require('gulp-connect');

用來創建個服務器

 gulp.task('connect',function(){  
        connect.server({  
            root:"dist",//根目錄  
            port: 8080,//端口號  
            livereload:true  
        });  
    });  

此task設置了服務的根目錄，端口號，以及是否即時刷新

本文主要分享這些，一般為gulp常用的命令，需特別注意文中所有reqire進來的資源 都需要用npm install 插件名將插件下載下來