使用Gulp構建前端自動化方案

前言

　　在剛入門前端的時候，我們並不清楚前端有工具可以幫我們自動化打包壓縮文件，當時只關注能實現功能就可以了，也不太在意前端性能優化的問題，隨着項目功能的復雜，項目也變得越來越大，頁面的執行速度也開始變慢，因此我們認識到了前端優化的重要性，但是之前的壓縮打包都是需要我們自己手動執行或者去直接轉化的網站進行轉化，這無疑增加了我們的工作量，作為程序員，我覺得更重要的是讓程序去執行我們想執行的東西，於是我便google了起來，查到了grunt和gulp，兩者都是自動化打包，但是grunt的一大堆繁雜的配置參數讓我頭疼不已，直到我打開了gulp的官網，仿佛打開了新世界的大門，沒有一大堆繁雜的配置參數，其API也是非常簡單，學習起來很容易，而且gulp使用的是nodejs中的stream流來讀取和操作數據的，使其速度更快。於是就有了下面的實踐了。　

在這里已經默認你已經了解過gulp的入門了並已經安裝了node.js，如果不了解的話請自行百度。

 

創建工程目錄

　　首先，先建立一個工程目錄，正所謂好的目錄就是工程的骨架，能讓別人一眼就清楚哪個模塊是干什么的，也便於代碼的維護管理，下面是我的目錄結構：

testGulp/
├── app/
│   ├── static/
│   │   ├── images/
│   │   │   └─ index.jpg
│   │   ├── less/
│   │   │   └─ index.less
│   │   └── scripts/
│   │       └─ index.js
│   └── views/
│       └─ index.html
│
├── dist/
└── release/

 

 

初始化npm

　　我們在新建目錄結構的時候，里面是沒有package.json文件的，需要我們npm init一下，然后不斷的回車，就會生成一個package.json文件了，熟悉了解node的同學肯定了解package.json文件的作用，里面包含了我們項目所需要的各種模塊的依賴和基本信息。下面是我的package.json:

{
  "name": "testGulp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Kevin",
  "license": "ISC",
  "dependencies": {},
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^4.0.0",
    "gulp-clean": "^0.3.2",
    "gulp-concat-dir": "^1.0.0",
    "gulp-imagemin": "^4.0.0",
    "gulp-less": "^3.3.2",
    "gulp-minify-css": "^1.2.4",
    "gulp-minify-html": "^1.0.6",
    "gulp-plumber": "^1.1.0",
    "gulp-run-sequence": "^0.3.2",
    "gulp-uglify": "^3.0.0",
    "gulp-zip": "^4.0.0"
  }
}

 

安裝gulp任務所需要的模塊

　　打開終端通過輸入 npm install package(安裝的包名，如:gulp) —save-dev然后回車，會發現終端有一個進度條正在安裝加載，安裝成功打開package.json可以發現devDependencies中會出現我們剛才安裝的包名以及對應的版本號。

　　這里也許有同學會問在其他地方有時候會看到別人用的是—save,有時時—save-dev,究竟兩者的區別是什么：

　　　使用—save-dev（也可以縮寫成-D）輸出的會出現在devDependencies，代表着是開發調試時的依賴，等到項目真正發布的時候不會真正出現在項目中。

　　　使用—save（也可以縮寫成-S）輸出的會出現在dependencies，代表着是發布后的依賴，等到項目真正發布的時候會真正出現在項目中，缺少它們項目會運行不了。

 

構建Gulp任務

　　Gulp用來協調指揮其他模塊的工作。首先在myproject文件夾下新建gulpfile.js文件，gulp會運行這個文件中的js，我的文件最終內容如下：

//使用嚴格模式。保證js的嚴謹，養成一個好習慣。
'use strict';


//使用require引入所有需要的模塊，Gulp.js是基於Node.js構建的
//因為Node.js遵循CommondJS規范
//CommondJS其中有一個Modules規范，使其可以以同步的模式加載模塊
var gulp = require('gulp'),
  //壓縮js
  uglify = require('gulp-uglify'),
  //編譯Less
  less = require('gulp-less'),
  //壓縮css
  minifyCss = require('gulp-minify-css'),
  //自動前綴補全
  autoprefixer = require('gulp-autoprefixer'),
  //壓縮HTML
  minifyHtml = require('gulp-minify-html'),
  //壓縮圖片
  imagemin = require('gulp-imagemin'),
  //管合並，可以合並同一目錄下的所有文件，好處是可以減少網絡請求
  concat = require('gulp-concat-dir'),
  //錯誤處理提示插件
  plumber = require('gulp-plumber'),
  //壓縮文件
  zip = require('gulp-zip'),
  //控制task中的串行和並行。（gulp默認是並行）
  //串行是指多個任務時，各個任務按順序執行，完成一個之后才能進行下一個。
  //並行指的是多個任務可以同時執行。
  runSequence = require('gulp-run-sequence'),
  //用來刪除文件
  clean = require('gulp-clean');

//創建一個名為js的任務
gulp.task('js', function(){
  // 首先取得app/static/scripts下的所有為.js的文件（**/的意思是包含所有子文件夾)
  return gulp.src('app/static/scripts/**/*.js')
    //錯誤管理模塊（有錯誤時會自動輸出提示到終端上）
    .pipe(plumber())
    //合並同一目錄下的所有文件,並將合並的目錄名作為合並后的文件名
    .pipe(concat({ext: '.js'}))
    //js壓縮
    .pipe(uglify())
    //將合並壓縮后的文件輸出到dist/static/scripts下（假如沒有dist目錄則自動生成dist目錄）
    .pipe(gulp.dest('dist/static/scripts'))
});


//創建一個名為less的任務
gulp.task('less', function(){
  // 首先取得app/static/less下的所有為.less的文件（**/的意思是包含所有子文件夾)
  return gulp.src('app/static/less/**/*.less')
    //錯誤管理模塊（有錯誤時會自動輸出提示到終端上）
    .pipe(plumber())
    //編譯less文件使其轉換為css文件
    .pipe(less())
    //前綴自動補全插件
    .pipe(autoprefixer())
    //合並同一目錄下的所有文件,並將合並的目錄名作為合並后的文件名
    .pipe(concat({ext: '.css'}))
    //css壓縮
    .pipe(minifyCss())
    //將合並壓縮后的文件輸出到dist/static/css下（假如沒有dist目錄則自動生成dist目錄）
    .pipe(gulp.dest('dist/static/css'))
});

//創建一個名為html的任務
gulp.task('html', function(){
  // 首先取得app/views下的所有為.html的文件（**/的意思是包含所有子文件夾)
  return gulp.src('app/views/**/*.html')
    //錯誤管理模塊（有錯誤時會自動輸出提示到終端上）
    .pipe(plumber())
    //html壓縮
    .pipe(minifyHtml())
    //將壓縮后的文件輸出到dist/views下（假如沒有dist目錄則自動生成dist目錄）
    .pipe(gulp.dest('dist/views'))
});


//創建一個名為images的任務
gulp.task('images', function(){
  // 首先取得app/static/images下的所有為.{png,jpg,jpeg,ico,gif,svg}后綴的圖片文件（**/的意思是包含所有子文件夾)
  return gulp.src('app/static/images/**/*.{png,jpg,jpeg,ico,gif,svg}')
    //錯誤管理模塊（有錯誤時會自動輸出提示到終端上）
    .pipe(plumber())
    .pipe(imagemin({
      optimizationLevel: 5, //類型：Number  默認：3  取值范圍：0-7（優化等級）
      progressive: true, //類型：Boolean 默認：false 無損壓縮jpg圖片
      interlaced: true, //類型：Boolean 默認：false 隔行掃描gif進行渲染
      multipass: true //類型：Boolean 默認：false 多次優化svg直到完全優化
    }))
    //將壓縮后的圖片輸出到dist/static/images下（假如沒有dist目錄則自動生成dist目錄）
    .pipe(gulp.dest('dist/static/images'))
});

//創建一個名為clean的任務
gulp.task('clean', function(){
  // 首先取得dist/*下的所有文件
  return gulp.src('dist/*', {read: false})
    //刪除dist/*下的所有文件
    .pipe(clean())
})


//創建一個名為public的任務
gulp.task('public', function(){
  // 首先取得dist/*下的所有文件
  return gulp.src('dist/*')
    //錯誤管理模塊（有錯誤時會自動輸出提示到終端上）
    .pipe(plumber())
    //將dist/*下的所有文件進行壓縮打包生成為public.zip文件
    .pipe(zip('public.zip'))
    //將生成的public.zip文件輸出到release下（假如沒有release目錄則自動生成release目錄）
    .pipe(gulp.dest('release'))
})

//創建一個名為watch的任務
gulp.task('watch', function(){
  //監聽各個目錄的文件，如果有變動則執行相應的任務操作文件
  gulp.watch('app/static/scripts/**/*.js',['js']);
  gulp.watch('app/static/less/**/*.less',['less']);
  gulp.watch('app/views/**/*.html',['html']);
})

//創建一個名為redist的任務
gulp.task('redist', function(){
  //先運行clean，然后並行運行html,js,less,images,watch
  //如果不使用gulp-run-sequence插件的話，由於gulp是並行執行的
  //有可能會出現一種情況（其他文件處理速度快的已經處理完了，然后clean最后才執行，會把前面處理完的文件刪掉，所以要用到runSequence）
  runSequence('clean', ['html', 'less', 'js', 'images', 'watch'])
})

//創建一個名為default的任務（上面的任務都可以沒有，但是這個任務必須有，不然在終端執行gulp命令會報錯）
//在終端上輸入gulp命令，會默認執行default任務，並執行redist任務
gulp.task('default', ['redist']);

 

最后

　　打開終端進入所在目錄，輸入gulp就可以嘩嘩嘩看到我們壓縮打包好的文件了，希望能幫助到一些在配置gulp遇到困擾的小伙伴。