前端工程化之打包工具

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'
        //     }
        // )
    ]
};

注：以上配置文件仅是简单示例，具体功能需要实际选择和配置