淺談前端自動化構建（摘抄）

本文轉載自查看原文 2019-05-13 22:01 1787

前言

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

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

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

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

② 然后，進行編碼

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

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

HTML去掉注析、換行符 - HtmlMin
CSS文件壓縮合並 – CssMinify
JS代碼風格檢查 – JsHint
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/}］
        }
    };

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

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

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

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

test:是對該類文件的正則表達式，用來判斷采用這個loader的條件
exclude是排除的目錄,比如node_modules中的文件，通常都是編譯好的js，可以直接加載，因此為了優化打包速度，可以排除。作為優化手段它不是必須的
loader: 加載器的名稱，每一個加載器都有屬於它自己的用法，具體要參考官方說明
query: 傳遞給加載器的附加參數或配置信息，有些也可以通過在根目錄下生成特殊的文件來單獨配置，比如.babelrc

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

小結

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

附：大佬原文地址https://www.cnblogs.com/kasmine/p/6436131.html。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 淺談前端自動化構建前端自動化構建學習筆記前端自動化構建之webpack 前端自動化構建工具關於前端自動化構建工具前端工程自動化構建總結 web前端工程化/構建自動化 Jenkins自動化構建前端vue項目（nodejs環境）使用Gulp構建前端自動化方案 gulp前端自動化構建並上傳oss