淺談前端自動化構建

前言 

　　現在的前端開發已經不再僅僅只是靜態網頁的開發了，日新月異的前端技術已經讓前端代碼的邏輯和交互效果越來越復雜，更加的不易於管理，模塊化開發和預處理框架把項目分成若干個小模塊，增加了最后發布的困難，沒有一個統一的標准，讓前端的項目結構千奇百怪。前端自動化構建在整個項目開發中越來越重要。

        我們首先來回想一下之前我們是如何來開始做一個項目的。

① 首先要確定這個項目要使用什么樣的技術來實現，然后開始規划我們的項目目錄，接着就要往項目增加第三方庫依賴，比如：

　　拷貝 CSS庫（Yui Reset | bootstrap）JS庫（Requiet.js | Seajs | jQuery | jQuery插件 ） 進相應目錄（拷貝 N個文件，花費N分鍾）

② 然后，進行編碼

　　編輯器編碼 => 切換到瀏覽器F5 => 編輯器編碼 => 切換到瀏覽器F5 => 編輯器編碼 => 切換到瀏覽器F5 => 編輯器編碼 => 切換到瀏覽器F5 …………

③ 編碼完成，進行語法檢查，文件合並和壓縮

1. HTML去掉注析、換行符 - HtmlMin

2. CSS文件壓縮合並 – CssMinify

3. JS代碼風格檢查 – JsHint

4. JS代碼壓縮 – Uglyfy

5. image壓縮 - imagemin

整個過程都在重復無用繁瑣的工具...

漸漸的，一些自動化構建工具出現了，人們開始使用例如Bower、Gulp、Grunt、node、yeoman等等工具來構建一個本地的開發環境。自動化構建已經成了前端開發的趨勢，所以學好自動化構建也就是為自己的開發打下了良好的基礎。

 

1.Grunt

　　前端自動化小工具，基於任務的命令行構建工具 

開始使用Grunt

　　通過閱讀官方文檔可以知道更多詳細內容，下面只是總結一下，自己使用Grunt的一個實例，便於日后使用，可以按照這個套路進行~

安裝 grunt-cli

1. 1. 自備node環境(>0.8.0), npm包管理

2. 2. 卸載舊版本grunt（<0.4.0） (沒裝過請忽略)

   npm uninstall grunt -g

3. 安裝grunt-cli

   npm install grunt-cli -g

 開始使用Grunt構建項目

　　　一般需要在你的項目中添加兩份文件：package.json 和 Gruntfile。

　　   然后，寫好下面的gruntfile.js文件的格式

module.exports = function(grunt) {
　　// 項目配置.
　　grunt.initConfig({ 　　　　// 定義Grunt任務  　});
 　// 加載能夠提供"uglify"任務的插件。 　　grunt.loadNpmTasks('grunt插件'); 
 　　// Default task(s). 　　grunt.registerTask('default', ['任務名']); }

 下面是我的一個 gruntfile.js文件

module.exports = function (grunt) {
  grunt.initConfig({
    watch: {
      ejs: {
        files: ['views/**'],
        options: {
          livereload: true,
        },
      },
      js: {
        files: ['public/js/**', 'models/**/*.js', 'schemas/**/*.js'],
        options: {
          livereload: true, //文件更新時重新啟動服務
        },
      },
    },
    nodemon: {
      dev: {
        file: './bin/www' //根據自己的實際修改
      }
    },
    concurrent: { // 同時執行nodemon和watch任務
      target: {
        tasks: ['nodemon', 'watch'],
        options: {
          logConcurrentOutput: true
        }
      }
    }
  });

  // 加載包含 “watch","concurrent","nodemon"任務的插件
  grunt.loadNpmTasks('grunt-contrib-watch')
  grunt.loadNpmTasks('grunt-concurrent')
  grunt.loadNpmTasks('grunt-nodemon');

  grunt.option('force', true)
 // 默認執行的任務列表
  grunt.registerTask('default', ['concurrent'])
}

最后，執行命令

1. 將命令行的當前目錄轉到項目的根目錄下。
2. 執行 npm install 命令安裝項目依賴的庫。
3. 執行   grunt  命令。

小結 Grunt的基本使用也就如上所示，比較簡單，更多可以參考Grunt的插件庫，比如 contrib-jshint js代碼檢查等插件的使用

 

2 . Gulp 

　　 gulp是基於Nodejs的自動任務運行器，它能自動化地完成javascript/sass/less/html/image/css 等文件的的測試、檢查、合並、壓縮、格式化、瀏覽器自動刷新、部署文件生成，並監聽文件在改動后重復指定的這些步驟。

　　使用Gulp的優勢就是利用流的方式進行文件的處理，使用管道（pipe）思想，前一級的輸出，直接變成后一級的輸入，通過管道將多個任務和操作連接起來，因此只有一次I/O的過程，流程更清晰，更純粹。Gulp去除了中間文件，只將最后的輸出寫入磁盤，整個過程因此變得更快。

使用Gulp,可以避免瀏覽器緩存機制，性能優化（文件合並，減少http請求；文件壓縮）以及效率提升（自動添加CSS3前綴；代碼分析檢查）

gulp的安裝及基本使用

　　　　1. 全局安裝 gulp：

$ npm install --global gulp

　　　　2. 作為項目的開發依賴（devDependencies）安裝：

$ npm install --save-dev gulp

　　　　3. 在項目根目錄下創建一個名為 gulpfile.js 的文件：

var gulp = require('gulp');

gulp.task('default', function() {
  // 將你的默認的任務代碼放在這
});

　　　　4. 運行 gulp：

$ gulp

默認的名為 default 的任務（task）將會被運行，在這里，這個任務並未做任何事情。

 gulp的插件使用

　　同Grunt一般，gulp也有插件庫，具體有興趣開發gulp插件的，可以看看 http://www.gulpjs.com.cn/docs/writing-a-plugin/

下面是我的一個 gulpfile.js文件，就此進行分析

'use strict'

const gulp = require('gulp')； //將gulp插件包含進來 

//在文件改動時候運行 mocha 測試用例
const mocha = require('gulp-mocha'),
  gutil = require('gulp-util'),
  jshint = require('gulp-jshint'), //js代碼校驗
  uglify = require('gulp-uglify'), //壓縮 js文件
  minifyCSS = require('gulp-minify-css'),//壓縮css
  concat = require('gulp-concat'), //合並文件
  notify = require('gulp-notify'),
  cache = require('gulp-cache'),
  rename = require('gulp-rename'), //重命名文件 
  livereload = require('gulp-livereload'),
  imagemin = require('gulp-imagemin');//優化圖片;


const srcPath = {
  script: './src/scripts/',
  style: './src/styles/',
  tempalte: './src/tempaltes/'
};

const destPath = {
  style: './dist/styles/',
  script: './dist/scripts/',
  base: './dist/'
};

// ==========================
// 獲取目錄src/test/../的js文件進行代碼檢驗，然后和main.js合並，進行壓縮，最后復制到dist/scripts目錄下。
// ==========================
function packjs() {
  return gulp.src(srcPath.script)
    .pipe(jshint('.jshintrc'))
    .pipe(jshint.reporter('default'))
    .pipe(concat('main.js'))
    .pipe(gulp.dest('dist/scripts'))
    .pipe(rename({
      suffix: '.min'
    }))
    .pipe(uglify())) //僅在生產環境時候進行壓縮
    .pipe(gulp.dest(destPath.script))
    .pipe(notify({
      message: 'Scripts task complete'
    }));
}


gulp.task('js', () => packjs());

 

命令行執行

$ gulp js

更多內容 查看 gulp 官方文檔api 

 

3 . webpack 

　　Webpack是一個模塊打包的工具，它的作用是把互相依賴的模塊處理成靜態資源。

webpack 的安裝及基本使用

　　　　1. 全局安裝 webpack ：

$ npm install webpack -g

　　　　2. 作為項目的開發依賴（devDependencies）安裝：

$ npm install --save-dev webpack 

　　　　3. 創建一個名為 webpack.config.js 的配置文件：

module.exports = {
　　　// 入口文件
        entry : "./entry.js",
        // 打包輸出文件
        output : {
            path : __dirname,
            filename : "bundle.js"
        }
};

命令行執行 如下命令，即可將 ./main.js 作為入口打包 bundle.js:

$ webpack

webpack的進階使用 之 加載器

module.exports = { 　　　　　// 入口文件
        entry : "./entry.js", // 打包輸出文件
 output : { path : __dirname, filename : "bundle.js" }, module : { loaders :［ {test : /\.css$/,loader:"style!css"}，
 {test: /\.js$/,loader: 'babel',
　　　　　　　　　　　　　　　　　　　　include: [path.join(projectRoot, 'src')], 　　　　　　　　　　　　　　　　　　　　exclude: /node_modules/}］ } };

這個例子使用 加載器 ，何謂加載器?加載器是對你的應用的源文件進行轉換的工具。

不同類型的文件有不同的加載器，比如jsx,es6要用到babel-loader,

加載css要用到css-loader,加載html要用到html-loader，以及 vue-loader，css-loader 等等. 

所有的loader都放在module下面的loaders里邊.通常有以下內容：

1. test:是對該類文件的正則表達式，用來判斷采用這個loader的條件 

2. exclude是排除的目錄,比如node_modules中的文件，通常都是編譯好的js，可以直接加載，因此為了優化打包速度，可以排除。作為優化手段它不是必須的 

3. loader: 加載器的名稱，每一個加載器都有屬於它自己的用法，具體要參考官方說明

4. query: 傳遞給加載器的附加參數或配置信息，有些也可以通過在根目錄下生成特殊的文件來單獨配置，比如.babelrc 

　 以上只是稍微講了webpack的基礎使用，更多使用方法 可以查看官方文檔

小結

　　前端工程自動化方案更新很快， 學習這些工具，是為了減輕重復勞動，提高效率。選擇適合自己的方案，而不是在追尋技術的路上迷失了方向。