前端自動化構建工具

阿新 • • 發佈：2018-07-13

urn 自身合並文件 limit ase 有效 www. javascrip 路徑配置

全局安裝是把包安裝在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

1、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常用插件：

grunt-contrib-clean——清除文件(打包處理生成的)
grunt-contrib-concat——合並多個文件的代碼到一個文件中
grunt-contrib-uglify——壓縮js文件
grunt-contrib-jshint——javascript語法錯誤檢查；
grunt-contrib-cssmin——壓縮/合並css文件
grunt-contrib-htmlmin——壓縮html文件
grunt-contrib-imagemin——壓縮圖片文件(無損)
grunt-contrib-copy——復制文件、文件夾
grunt-contrib-requirejs——合並壓縮requirejs管理的所有js模塊文件
grunt-contrib-watch——實時監控文件變化、調用相應的任務重新執行

2、Gulp（中文網）

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

（1）特點：

任務化
基於流（gulp有一個自己的內存，通過指定API將源文件流到內存中，完成相應的操作後再通過相應的API流出去）
執行任務可以同步可以異步

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

（2）重要API：

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

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

安裝gulp:

全局安裝gulp：npm install gulp -g
局部安裝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，編譯的文件會自動發生改變

3、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‘]),
    ]
};

示例代碼及教程

前端自動化構建工具

前端自動化構建工具

一、理解

1、什麽是項目構建？

2、構建工具的作用？

二、構建工具

1、Grunt（中文網）

（1）介紹：

（2）常用功能：

（3）安裝步驟

（4）Grunt常用插件：

2、Gulp（中文網）

（1）特點：

（2）重要API：

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

（4）相關插件

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

3、Webpack（中文網）

（1）說明：

（2）四個核心概念：

（3）安裝

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

相關推薦

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