前端工程化之打包工具

webpack、grunt、gulp區別

grunt和gulp：任務執行程序，根據配置文件中匹配規則執行任務，不能做到按需加載，雖然能配置babel對es6進行降級，但是不能預加載babel墊片

webpack：模塊打包程序，更像一套前端工程化解決方案。能通過智能分析對js進行模塊划分，按需加載，並且能預加載babel墊片，其能利用強大插件機制，解決前端靜態資源依賴管理的問題。

 

webpack與grunt、gulp運行機制

# grunt gulp 思路

【遍歷源文件】->【匹配規則】->【打包】

做不到按需加載，對打包的資源，是否用到，打包過程不關心。

# webpack

【入口】->【模塊依賴加載】->【依賴分析】->【打包】

在加載、分析、打包的過程中，可以針對性的做一些解決方案。比如：code split(拆分公共代碼)

 

Grunt和Gulp的工作方式是：在一個配置文件中，指明對某些文件進行類似編譯，組合，壓縮等任務的具體步驟，工具之后可以自動替你完成這些任務

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

 

Grunt與Gulp性能比較

Grunt: 每個任務處理完成后存放在本地磁盤.tmp目錄中，有本地磁盤的I/O操作，會導致打包速度比較慢。
Gulp: gulp與grunt都是按任務執行，gulp有一個文件流的概念。每一步構建的結果並不會存在本地磁盤，而是保存在內存中，下一個步驟是可以使用上一個步驟的內存，大大增加了打包的速度。

 

配置文件示例

grunt配置文件示例（Gruntfile.js）：

module.exports = function (grunt) {
    'use strict';
    //導入/加載使用到的任務插件
    grunt.loadNpmTasks('grunt-contrib-less');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-qunit');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-htmlmin');
    grunt.loadNpmTasks('grunt-contrib-imagemin');
    //grunt config
    grunt.initConfig({
        //從package.json中讀取項目元數據(項目名...)
        pkg: grunt.file.readJSON('package.json'),
        //less編譯
        less: {
            development: {
                //除了options,其它key可隨意起   執行任務時都會迭代執行
                files: [{
                    //expand設置為true：啟用下面選項
                    expand: true,
                    //less源文件基路徑
                    cwd: 'src/less',
                    //less匹配模式
                    src: ['*.less'],
                    //css目標文件基路徑
                    dest: 'src/css',
                    //生成文件的擴展名：css
                    ext: '.css'
                }]
            }
        },
        //css壓縮
        cssmin: {
            //可配置選項
            options: {
                //文件頭部生成的注釋：包名+時間  <%= js代碼 %>
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            static_mappings: {
                files: [{
                    expand: true,
                    cwd: 'src/css',
                    src: '*.css',
                    dest: 'src/css/',
                    ext: '.min.css'
                }]
            }
        },
        //壓縮HTML
        htmlmin: {
            options: {
                removeComments: true, //移除注釋
                removeCommentsFromCDATA: true, //移除來自字符數據的注釋
                collapseWhitespace: true, //無用空格
                collapseBooleanAttributes: true, //失敗的布爾屬性
                // // removeAttributeQuotes: true,//移除屬性引號      有些屬性不可移走引號
                // removeRedundantAttributes: true,//移除多余的屬性
                // useShortDoctype: true,//使用短的跟元素
                removeEmptyAttributes: true //移除空的屬性
                // removeOptionalTags: true,//移除可選附加標簽
            },
            //yasuo 是隨意起的任務目標名 因為任務開始會迭代全部目標 因此可隨意起
            yasuo: {
                expand: true,
                cwd: 'src/pages',
                src: ['*.html'],
                dest: 'dist/pages',
                ext: '.html'
            }
        },
        //壓縮圖片
        imagemin: {
            dist: {
                options: {
                    optimizationLevel: 3 //定義 PNG 圖片優化水平
                },
                files: [{
                    expand: true,
                    cwd: 'src/images', // 圖片在imagemin目錄下
                    src: ['**/*.{png,jpg,jpeg}'], // 優化 imagemin 目錄下所有 png/jpg/jpeg 圖片
                    dest: 'dist/images' // 優化后的圖片保存位置，覆蓋舊圖片，並且不作提示
                }]
            }
        },
        //js語法檢查
        jshint: {
            //要檢查的文件
            files: ['src/js/*.js'],
            options: {
                globals: {
                    jQuery: true,
                    console: true,
                    module: true
                }
            }
        },
        //js壓縮
        uglify: {
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',
                //壓縮時去除console.log
                compress: {
                    drop_console: true
                }
            },
            static_mappings: {
                files: [{
                    expand: true,
                    cwd: 'src/js',
                    src: '*.js',
                    dest: 'src/js/min',
                    ext: '.min.js'
                }]
            }
        },
        //合並壓縮的js和css
        concat: {
            //合並js
            distjs: {
                //源文件路徑+匹配模式
                src: ['src/js/min/*.min.js'],
                //合並后的文件
                dest: 'dist/js/app.js'
            },
            //合並css
            distcss: {
                src: ['src/css/*.min.css'],
                dest: 'dist/css/app.css'
            }
        },
        //代碼測試
        qunit: {
            //要測試文件
            files: ['dist/pages/*.html']
        },
        //監聽器
        watch: {
            //監聽文件變化並執行相應任務
            //表示監聽src下的所有目錄下的所有文件(也可以寫成模板形式：<%= jshint.files %>：相當於src/js/*.js) 
            files: ['src/**/*.*'],
            //文件變化時執行的任務（按順序執行）
            task: ['less', 'cssmin', 'htmlmin', 'imagemin', 'jshint', 'uglify', 'concat', 'qunit']
        }
    });
    //設置任務別名default：代表數組中的多任務，且依次執行 運行時使用grunt default（default默認不寫）
    grunt.registerTask('default', ['less', 'cssmin', 'htmlmin', 'imagemin', 'jshint', 'uglify', 'concat', 'qunit', 'watch']);
};

 

gulp配置文件示例（gulp.js 這里使用gulp4）：

//gulp4核心配置文件
var app = { // 定義目錄
    srcPath: 'src/',
    distPath: 'dist/'
};

/*1.引入gulp與gulp插件   使用時，要去下載這些插件*/
var gulp = require('gulp');
var less = require('gulp-less');
var cssmin = require('gulp-cssmin');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var imagemin = require('gulp-imagemin');
var htmlmin = require('gulp-htmlmin');
var rename = require('gulp-rename');
var qunit = require('gulp-qunit');
/*壓縮html*/
function html () {
    //配置壓縮項
    var options = {
        removeComments: true, //清除HTML注釋
        collapseWhitespace: true, //壓縮HTML
        collapseBooleanAttributes: true, //省略布爾屬性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true, //刪除所有空格作屬性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true, //刪除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true, //刪除<style>和<link>的type="text/css"
        minifyJS: true, //壓縮頁面JS
        minifyCSS: true //壓縮頁面CSS
    };
    /*要操作哪些文件 確定源文件地址*/
    gulp.src(app.srcPath + 'pages/*.html') /*src下所有目錄下的所有.html文件*/
        .pipe(htmlmin(options))
        .pipe(gulp.dest(app.distPath + 'pages'));
};
/*編譯less生成css，壓縮並合並css */ /*注意方法名不要起成less，或者cssmin，會和框架沖突 */
function csstask() {
    gulp.src(app.srcPath + 'less/*.less')
        .pipe(less())
        .pipe(gulp.dest(app.srcPath + 'css/'))
        /*經過壓縮，放到dist目錄當中*/
        .pipe(cssmin())
        .pipe(rename({
            extname: '.min.css'
        }))
        .pipe(gulp.dest(app.srcPath + 'css/'))
        .pipe(concat('app.css'))
        .pipe(gulp.dest(app.distPath + 'css'));
};
/*壓縮並合並js*/
function js() {
    gulp.src(app.srcPath + 'js/*.js')
        .pipe(uglify())
        .pipe(rename({
            extname: '.min.js'
        }))
        .pipe(gulp.dest(app.srcPath + 'js/min/'))
        .pipe(concat('app.js'))
        .pipe(gulp.dest(app.distPath + 'js'));
};
/*壓縮圖片*/
function image() {
    gulp.src(app.srcPath + 'images/*')
        .pipe(imagemin())
        .pipe(gulp.dest(app.distPath + 'images'));
};
//html測試
function test(){
    gulp.src(app.distPath + 'pages/*.html')
        .pipe(qunit());
};
//當前bulid時，會自動把數組當中的所有任務給執行了。
// gulp.task('build', ['less', 'html', 'js', 'image', 'test']);
function builder(){
    return gulp.series(gulp.parallel(csstask,html,js,image),test);
} 
//設置監聽器
// function watch ['build'], function () {
//     /*監聽哪些任務*/
//     // gulp.watch('bower_components/**/*',['lib']);
//     gulp.watch(app.srcPath + '/*.html', ['html']);
//     gulp.watch(app.srcPath + 'js/*.js', ['js']);
//     gulp.watch(app.srcPath + 'images/*', ['image']);
//     gulp.watch(app.srcPath + 'less/*.less', ['less']);
// });
gulp.watch(app.srcPath + '/*.html', html);
gulp.watch(app.srcPath + 'js/*.js', js);
gulp.watch(app.srcPath + 'images/*',image);
gulp.watch(app.srcPath + 'less/*.less',csstask);
/*定義默認任務
 * 直接執行gulp 會調用的任務
 * */
// gulp.task('default', ['watch']);
exports.default=builder();

 

webpack配置文件示例（webpack.config.js）

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");        //提取成單個css文件
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');      //壓縮css插件
const HtmlWebpackPlugin = require('html-webpack-plugin');       //html文件打包，壓縮
const CleanWebpackPlugin = require("clean-webpack-plugin");     //刪除原來的打包文件
const copyWebpackPlugin = require("copy-webpack-plugin");     //復制靜態文件

module.exports = {
    mode: 'development',
    entry: {        //入口文件
        index: './src/js/index.js',
    },
    output: {       //出口文件
        publicPath: '',     //模板、樣式、腳本、圖片等資源的路徑中統一會加上額外的路徑
        path: path.resolve(__dirname, 'dist'),
        filename: './js/[name].[hash:8].js'
    },
    module: {
        rules: [
            {
                test: /\.html$/,
                use: {
                    loader: 'html-loader',
                    options: {

                    }
                }
            },
            {
                test: /\.js$/,
                // exclude: /node_modules/,
                exclude: path.resolve(__dirname, 'node_modules'), //編譯時，不需要編譯哪些文件
                //include: path.resolve(__dirname, 'src'),//在config中查看 編譯時，需要包含哪些文件
                loader: 'babel-loader',
                query: {
                    presets: ['latest'] //按照最新的ES6語法規則去轉換
                }
            },
            {
                test: /\.css$/,
                use: [
                    // {loader: "style-loader"},        //在頁面內嵌入css
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            // 這里可以指定一個 publicPath
                            // 默認使用 webpackOptions.output中的publicPath
                            publicPath: '../'
                        }
                    },      //單獨抽離css
                    {loader: "css-loader"},
                    {       //自動添加前綴
                        loader: "postcss-loader",
                        options: {
                            plugins: [
                                require("autoprefixer")
                            ]
                        }
                    }
                ]
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 100,
                    name: './img/[name].[hash:7].[ext]',
                }
            },
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),       //刪除上次打包文件，默認目錄'./dist'
        new copyWebpackPlugin([{        //靜態資源輸出,將src目錄下的assets文件夾復制到dist目錄下
            from: path.join(__dirname, "./src/assets"),
            to: path.join(__dirname, "./dist/assets"),
        }]),
        new MiniCssExtractPlugin({
            filename: "./css/[name].[hash:8].css"
        }),
        new OptimizeCssAssetsPlugin(),      //壓縮css文件
        new HtmlWebpackPlugin({
            favicon: './src/img/favicon.ico',      //圖標
            template: './src/index.html',      //指定要打包的html
            filename:'index.html',       //指定輸出路徑和文件名
            minify: {       //壓縮
                removeComments: true,       //移除HTML中的注釋
                collapseWhitespace:true,        //刪除空白符與換行符
                removeAttributeQuotes: true        //去除屬性引用
            }
        }),
        // new HtmlWebpackPlugin(//打包第二個頁面
        //     {
        //         template: './app/src/page/index2.html',
        //         filename:'./page/index2.html'
        //     }
        // )
    ]
};

注：以上配置文件僅是簡單示例，具體功能需要實際選擇和配置