前端自動化構建工具

全局安裝是把包安裝在Node安裝目錄下的node_modules文件夾中，通常在 \Users\用戶名\AppData\Roaming\ 目錄下，可使用npm root -g查看全局安裝目錄

本地（局部）安裝是把包安裝在指定項目（要在指定的根目錄下輸入命令）的node_modules文件夾下（若沒有，會自動建立一個node_modules文件夾）

具體區別，推薦博文：  全局安裝和本地（局部）安裝的區別

 本地安裝可讓每一個項目擁有獨立的包，不受全局包的影響，方便項目的移動、複製、打包等，保證不一樣版本包之間的相互依賴，

1、理解

一、什麼是項目構建？

• 編譯項目中的 js、sass、less
• 合併js/css等文件(使用構建工具合併後，會自動生成合並後文件，這樣只需引入合併文件便可，減小資源加載的次數)
• 壓縮js/css/html等資源文件（減少文件的大小，減少內存佔用）
• js語法的檢查

項目構建能夠減小項目的重量，

二、構建工具的做用？

簡化項目構建，自動化完成構建

2、構建工具

主要有三種：Grunt、Gulp、Webpack

一、Grunt（中文網）

（1）介紹：

是一套前端自動化構建工具，一個基於nodeJs的命令行工具，它是一個任務運行器, 配合其豐富強大的插件

執行任務時是同步的，要注意任務的順序

（2）經常使用功能：

• 合併文件(js/css)
• 壓縮文件(js/css)
• 語法檢查(js)
• less/sass預編譯處理
• 其它

（3）安裝步驟

• 安裝grunt

全局安裝 grunt-cli：npm install -g grunt-cli

局部安裝grunt：npm install grunt --save-dev 

• 配置文件: Gruntfile.js：

此配置文件本質就是一個node函數類型模塊
配置編碼包含3步:

1. 初始化插件配置 2. 加載插件任務

3. 註冊構建任務基本編碼:

• 構建命令
• 使用插件

module.exports = function(grunt){ // 1. 初始化插件配置
grunt.initConfig({ //主要編碼處
}); // 2. 加載插件任務 // grunt.loadNpmTasks('grunt-contrib-concat'); // 3. 註冊構建任務
grunt.registerTask('default', []); };

（4）Grunt經常使用插件：

1. grunt-contrib-clean——清除文件(打包處理生成的)
2. grunt-contrib-concat——合併多個文件的代碼到一個文件中
3. grunt-contrib-uglify——壓縮js文件
4. grunt-contrib-jshint——javascript語法錯誤檢查；
5. grunt-contrib-cssmin——壓縮/合併css文件
6. grunt-contrib-htmlmin——壓縮html文件
7. grunt-contrib-imagemin——壓縮圖片文件(無損)
8. grunt-contrib-copy——複製文件、文件夾
9. grunt-contrib-requirejs——合併壓縮requirejs管理的全部js模塊文件
10. grunt-contrib-watch——實時監控文件變化、調用相應的任務從新執行

二、Gulp（中文網）

gulp是與grunt功能相似的前端項目構建工具, 也是基於Nodejs的自動任務運行器
能自動化地完成 javascript/coffee/sass/less/html/image/css 等文件的合併、壓縮、檢查、監聽文件變化、瀏覽器自動刷新、測試等任務
gulp更高效(異步多任務), 更易於使用, 插件高質量

（1）特色：

• 任務化
• 基於流（gulp有一個本身的內存，經過指定API將源文件流到內存中，完成相應的操做後再經過相應的API流出去）
• 執行任務能夠同步能夠異步

gulpfile.js-----gulp配置文件 任務執行時，會首先執行該文件

（2）重要API：

1. gulp.src(filePath/pathArr) : 指向指定路徑的全部文件,找到目標源文件，將數據讀取到gulp的內存中
2. gulp.dest(dirPath/pathArr)：指向指定的全部文件夾，將文件輸出到指定的文件夾中
3. gulp.task(name, [deps], fn) ：定義一個任務
4. gulp.watch() ：監視文件的變化

 

（3）安裝步驟 （全局安裝gulp是爲了執行gulp任務，本地安裝gulp則是爲了調用gulp插件的功能）

• 安裝gulp:

1. 全局安裝gulp：npm install gulp -g
2. 局部安裝gulp：npm install gulp --save-dev

• 配置編碼: gulpfile.js

　　　　//引入gulp模塊
　　　　var gulp = require('gulp');
　　　　//註冊任務
　　　　gulp.task('任務名', function() {
　　　　　　// 任務的操做
　　　　});

　　　　//註冊默認任務
　　　　gulp.task('default', ['任務名'])

• 構建命令:
  在終端  根目錄下  輸入：
  gulp   會執行gulpfile.js文件中全部的任務
  

　　　gulp 任務名   會執行gulpfile.js文件中指定的任務  

• 使用gulp插件

（4）相關插件 

• gulp-concat : 合併文件(js/css)
• gulp-uglify : 壓縮js文件
• gulp-rename : 文件重命名
• gulp-less : 編譯less 轉化less語法爲css
• gulp-clean-css : 壓縮css文件
• gulp-livereload : 實時自動編譯刷新

下載插件（可一次下載安裝多個，安裝在項目根目錄下）：

npm install gulp-concat gulp-uglify gulp-rename --save-dev

npm install gulp-less gulp-clean-css --save-dev 

（5）舉例：下面是一個gulpfile.js文件

var gulp = require('gulp');//引入的gulp是一個對象 //引入的插件 均爲方法
var concat = require('gulp-concat'); var uglify = require('gulp-uglify'); var rename = require('gulp-rename'); var less = require('gulp-less'); var cssClean = require('gulp-clean-css'); //註冊任務(基本語法) // gulp.task('任務名',function(){ // //任務的操做 // // })

//註冊 合併壓縮js的任務
gulp.task('js',function(){ return gulp.src('src/js/*.js') //找到目標源文件，將數據讀取到gulp的內存中 *表明所有文件
        .pipe(concat('build.js')) //參數爲 合併後 js文件的名字
        .pipe(gulp.dest('dist/js/')) //參數爲 輸出文件到的文件夾 只要尚未操做完說明當前的文件還在內存中
        .pipe(uglify()) //壓縮文件
        .pipe(rename({suffix:".min"}))//重命名
        .pipe(gulp.dest('dist/js/')); }); //註冊 轉換less爲css的任務
gulp.task('less',function(){ //帶上return 爲異步 ；不帶return 爲同步；異步速度快，由於任務能夠同時加載，建議用異步
    return gulp.src('src/less/*.less') .pipe(less()) //編譯less文件爲css文件
        .pipe(gulp.dest('src/css/')) }); //註冊 合併壓縮css文件的任務
gulp.task('css',['less'],function(){ //['less'] 表示 css任務的執行依賴於less任務，只有當less任務所有執行後，纔會開啓css任務
    return gulp.src('src/css/*.css') //找到文件
        .pipe(concat('build.css')) //合併文件
        .pipe(cssClean()) //壓縮文件
        .pipe(rename({suffix: '.min'})) //重命名
        .pipe(gulp.dest('dist/css/')); //輸出文件
});
//註冊 默認任務
gulp.task('default',['js','less','css']);

終端處 在項目根目錄下 輸入：

• gulp js  會自動執行該 js 任務
• gulp css 會自動執行 該 css 任務
• gulp less 會自動執行該less 任務
• gulp 會自動執行全部任務

 目錄結構大體以下：

 

最後還有一個自動編譯插件（即源碼發生改變時，原先通過處理的文件會自動更新，不用再從新gulp構建一遍）

 自動編譯

下載插件： npm install gulp-livereload --save-dev 配置編碼:： var livereload = require('gulp-livereload'); //全部的任務後邊 都要加上一個「管道」，來保持更新：
.pipe(livereload()); //註冊 監測任務
gulp.task('watch', ['default'], function () { //開啓監視：
livereload.listen(); //監視指定的文件, 並指定對應的處理任務
 gulp.watch('src/js/*.js',['js']); gulp.watch(['src/css/*.css','src/less/*.less'],['css']) });

這樣，當文件發生改變時，不用再從新gulp，編譯的文件會自動發生改變

三、Webpack（中文網）

（1）說明：

Webpack是前端資源模塊化管理和打包工具，一個模塊打包器(bundler)。
在Webpack看來, 前端的全部資源文件(js/json/css/img/less/...)都會做爲模塊處理
它將根據模塊的依賴關係進行靜態分析，生成對應的靜態資源

Webpack的工做方式是：把你的項目當作一個總體，經過一個給定的主文件（如：index.js），Webpack將從這個文件開始找到你的項目的全部依賴文件，使用loaders處理它們，最後打包爲一個（或多個）瀏覽器可識別的JavaScript文件。

與gulp和grunt相比，Webpack的處理速度更快更直接，能打包更多不一樣類型的文件，更主要的區別仍是 webpack是一個模塊化打包工具。

（2）四個核心概念：

• 入口(entry)：指示 webpack 應該使用哪一個模塊，來做爲構建其內部依賴圖的開始。進入入口起點後，webpack 會找出有哪些模塊和庫是入口起點（直接和間接）依賴的。
• 輸出(output)：告訴 webpack 在哪裏輸出它所建立的 bundles，以及如何命名這些文件，默認值爲 ./dist。基本上，整個應用程序結構，都會被編譯到你指定的輸出路徑的文件夾中。
• loader：讓 webpack 可以去處理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 能夠將全部類型的文件轉換爲 webpack 可以處理的有效模塊，而後你就能夠利用 webpack 的打包能力，對它們進行處理
• 插件(plugins)：使用時，require() 引入，而後把它添加到 plugins 數組中

（3）安裝

全局安裝：

npm install webpack webpack-cli --g

局部安裝（本地安裝）：

npm install webpack webpack-cli --save-dev

（4）舉例：下面是一個 webpack.config.js文件

const path = require('path');//path是內置的模塊，用來設置路徑
const HtmlWebpackPlugin = require('html-webpack-plugin'); //自動生成html文件的插件
const CleanWebpackPlugin = require('clean-webpack-plugin'); //清除以前打包的文件
 module.exports = { entry: './src/js/entry.js', // 入口文件
    output: { // 輸出配置
        filename: 'bundle.js', // 輸出文件名
        path: path.resolve(__dirname, 'dist/js')  //輸出文件路徑配置 __dirname表明根目錄
    },
 module: { rules: [ //樣式 loader
 { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, { //圖片 loader
                test: /\.(png|jpg|gif)$/, use: [ { loader: 'url-loader', options: { limit: 8192 } } ] } ] },
    devServer: {//熱部署
        contentBase: 'dist/js/' //若爲空 webpack-dev-server默認服務於根目錄下的index.html
    },
    plugins: [ //插件列表
        new HtmlWebpackPlugin({template: './index.html'}), new CleanWebpackPlugin(['dist']), ] };

示例代碼及教程