淺談前端自動化構建

時間 2019-11-09

原文原文鏈接

前言

　　如今的前端開發已經再也不僅僅只是靜態網頁的開發了，突飛猛進的前端技術已經讓前端代碼的邏輯和交互效果愈來愈複雜，更加的不易於管理，模塊化開發和預處理框架把項目分紅若干個小模塊，增長了最後發佈的困難，沒有一個統一的標準，讓前端的項目結構千奇百怪。前端自動化構建在整個項目開發中愈來愈重要。javascript

咱們首先來回想一下以前咱們是如何來開始作一個項目的。css

① 首先要肯定這個項目要使用什麼樣的技術來實現，而後開始規劃咱們的項目目錄，接着就要往項目增長第三方庫依賴，好比：html

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

② 而後，進行編碼vue

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

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

HTML去掉注析、換行符 - HtmlMinwebpack
CSS文件壓縮合並 – CssMinifygit
JS代碼風格檢查 – JsHintes6
JS代碼壓縮 – Uglyfy
image壓縮 - imagemin

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

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

1.Grunt

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

開始使用Grunt

　　經過閱讀官方文檔能夠知道更多詳細內容，下面只是總結一下，本身使用Grunt的一個實例，便於往後使用，能夠按照這個套路進行~

安裝 grunt-cli

1. 自備node環境(>0.8.0), npm包管理
2. 卸載舊版本grunt（<0.4.0） (沒裝過請忽略)
```
npm uninstall grunt -g
```
安裝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文件

 1 module.exports = function (grunt) {
 2   grunt.initConfig({
 3     watch: {
 4       ejs: {
 5         files: ['views/**'],
 6         options: {
 7           livereload: true,
 8         },
 9       },
10       js: {
11         files: ['public/js/**', 'models/**/*.js', 'schemas/**/*.js'],
12         options: {
13           livereload: true, //文件更新時從新啓動服務
14         },
15       },
16     },
17     nodemon: {
18       dev: {
19         file: './bin/www' //根據本身的實際修改
20       }
21     },
22     concurrent: { // 同時執行nodemon和watch任務
23       target: {
24         tasks: ['nodemon', 'watch'],
25         options: {
26           logConcurrentOutput: true
27         }
28       }
29     }
30   });
31 
32   // 加載包含 「watch","concurrent","nodemon"任務的插件
33   grunt.loadNpmTasks('grunt-contrib-watch')
34   grunt.loadNpmTasks('grunt-concurrent')
35   grunt.loadNpmTasks('grunt-nodemon');
36 
37   grunt.option('force', true)
38  // 默認執行的任務列表
39   grunt.registerTask('default', ['concurrent'])
40 }

最後，執行命令

將命令行的當前目錄轉到項目的根目錄下。
執行 npm install 命令安裝項目依賴的庫。
執行 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/}］ } };