使用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遇到困擾的小夥伴。