學習安裝並配置前端自動化工具Gulp

Gulp和全部Gulp插件都是基於nodeJs來運行的，所以在你的電腦上須要安裝nodeJs，安裝過程請移駕安裝並配置前端自動化工具——grunt。安裝完成後，經過運行cmd進入DOS命令窗口，如圖：

如上圖，輸入node -v而後回車，看到有版本號，證實nodeJs安裝成功。
接下來就是安裝Gulp了：

一、首先進行全局安裝gulp,如圖：

安裝完成後，輸入gulp -v而後回車，看到有版本號，證實gulp安裝成功。

二、在你的項目中安裝做爲項目的開發依賴（devDependencies），如圖：

安裝過程當中會出現WARN警告提示，能夠不用管它。

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

四、運行gulp，如圖：

上圖已經說明，能夠成功運行gulp了。

五、下載項目所須要插件：

• （5.1）若是隻須要下載一個插件（以js壓縮gulp-uglify爲例）,輸入以下代碼，回車。

• （5.2）若是須要下載多個插件，則插件之間用空格隔開。

六、配置gulpfile.js

//引入gulp
var gulp = require('gulp');
//引入組件
var less = require('gulp-less'),//編譯less
    minifyCss = require('gulp-minify-css'),//壓縮css
    uglify = require('gulp-uglify'),//壓縮js
    htmlmin = require('gulp-htmlmin'),//壓縮html
    concat = require('gulp-concat'),//文件合併
    rename = require('gulp-rename');//重命名js
//編譯less  定義一個less任務（自定義任務名稱）
gulp.task('less',function(){
  gulp.src('./less/*.less')   //該任務針對的文件
      .pipe(less())  //該任務調用的模塊
      .pipe(gulp.dest('./css'));//編譯後的路徑
});
//壓縮css
gulp.task('cssmin', function() {
    gulp.src('./css/*.css')      //壓縮的文件
        .pipe(rename({suffix: '.min'}))        
        .pipe(minifyCss())  //執行壓縮
        .pipe(gulp.dest('./dist/css'));   //輸出文件夾
});
//壓縮而且重命名js
gulp.task('jsmin',function(){
  gulp.src('./js/*.js')
      .pipe(concat('all.js'))    //合併文件，若是沒有這一句，則不進行合併
      .pipe(rename({suffix: '.min'}))
      .pipe(uglify())
      .pipe(gulp.dest('./dist/js'));
});

//壓縮html
gulp.task('htmlmin',function(){
  var options = {
      collapseWhitespace:true,   //從字面意思應該能夠看出來，清除空格，壓縮html，這一條比較重要，做用比較大，引發的改變壓縮量也特別大。
      collapseBooleanAttributes:true,   //省略布爾屬性的值，好比：<input checked="checked"/>,那麼設置這個屬性後，就會變成 <input checked/>。
      removeComments:true,   //清除html中註釋的部分，咱們應該減小html頁面中的註釋。
      removeEmptyAttributes:true,   //清除全部的空屬性。
      removeScriptTypeAttributes:true,   //清除全部script標籤中的type="text/javascript"屬性。
      removeStyleLinkTypeAttributes:true,   //清楚全部Link標籤上的type屬性。
      minifyJS:true,   //壓縮html中的javascript代碼。
      minifyCSS:true   //壓縮html中的css代碼。
  };
  gulp.src('./*.html')
      .pipe(htmlmin(options))
      .pipe(gulp.dest('./dist/html'));
});   //總之，壓縮Html的原則就是清除沒用的代碼，刪除本就是默認值的屬性，將html壓縮到最小，這樣才能提升項目運行的性能。

//默認任務
gulp.task('default',function(){
  gulp.run('jsmin','less','cssmin','htmlmin');//run同時並行多個文件
  //監聽文件變化
  gulp.watch(['./js/*.js','./less/*.less','./*.html'],function(){   //實時監聽js less css的變化
    gulp.run('jsmin','less','cssmin','htmlmin');
  });
});

//gulp.task(name[, deps], fn) 定義任務  name：任務名稱 deps：依賴任務名稱 fn：回調函數
//gulp.src(globs[, options]) 執行任務處理的文件  globs：處理的文件路徑(字符串或者字符串數組) 
//gulp.dest(path[, options]) 處理完後文件生成路徑

其中：
1.task(參數1，參數2) 配置任務，參數1任務名稱，參數2回調方法
2.src(參數爲路徑) 放的是源文件路徑
3.dest(參數) 參數爲咱們打包的資源的路徑，就是你全部處理以後的文件的輸出路徑,若是某文件夾不存在，將會自動建立它
4.watch() 自動監聽文件變化

具體的，能夠去gulp官網查看其API。

最後就是在項目中使用這些插件了，下圖是個人項目目錄，裏邊的css文件夾中有開發時寫的css樣式文件，js文件夾中有開發時寫的js文件：

而後在DOS命令中運行gulp，會在項目中新建一個生產用dist文件夾，該文件夾裏邊就是壓縮以後的css和js文件：

同時，因爲在項目中也有less預編譯文件，也安裝了less插件，gulpfile.js中也配置了less，因此在css開發文件夾下也出現了less被編譯後的css文件：

• 注意，因爲在運行gulp時，css開發文件夾下沒有style.css，所以運行gulp後在dist生產文件夾下的css文件夾中也就沒有style.min.css，可是在css開發文件夾中卻出現了style.css，如上圖，由於此時這個style.css文件就是style.less在被編譯後所生成的，因此要想使得這個css文件也被壓縮，就要再運行一次gulp了。以下圖，再一次運行gulp後style.css也被成功壓縮了。

至此，gulp的安裝和使用過程就所有介紹完畢了。從中，本人也得到了和廣大的前端開發人員同有的一個感觸就是gulp的配置確實比grunt簡單多了。