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）：
1 module.exports = function (grunt) { 2 \'use strict\'; 3 //导入/加载使用到的任务插件 4 grunt.loadNpmTasks(\'grunt-contrib-less\'); 5 grunt.loadNpmTasks(\'grunt-contrib-cssmin\'); 6 grunt.loadNpmTasks(\'grunt-contrib-uglify\'); 7 grunt.loadNpmTasks(\'grunt-contrib-concat\'); 8 grunt.loadNpmTasks(\'grunt-contrib-jshint\'); 9 grunt.loadNpmTasks(\'grunt-contrib-qunit\'); 10 grunt.loadNpmTasks(\'grunt-contrib-watch\'); 11 grunt.loadNpmTasks(\'grunt-contrib-htmlmin\'); 12 grunt.loadNpmTasks(\'grunt-contrib-imagemin\'); 13 //grunt config 14 grunt.initConfig({ 15 //从package.json中读取项目元数据(项目名...) 16 pkg: grunt.file.readJSON(\'package.json\'), 17 //less编译 18 less: { 19 development: { 20 //除了options,其它key可随意起 执行任务时都会迭代执行 21 files: [{ 22 //expand设置为true：启用下面选项 23 expand: true, 24 //less源文件基路径 25 cwd: \'src/less\', 26 //less匹配模式 27 src: [\'*.less\'], 28 //css目标文件基路径 29 dest: \'src/css\', 30 //生成文件的扩展名：css 31 ext: \'.css\' 32 }] 33 } 34 }, 35 //css压缩 36 cssmin: { 37 //可配置选项 38 options: { 39 //文件头部生成的注释：包名+时间 <%= js代码 %> 40 banner: \'/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n\' 41 }, 42 static_mappings: { 43 files: [{ 44 expand: true, 45 cwd: \'src/css\', 46 src: \'*.css\', 47 dest: \'src/css/\', 48 ext: \'.min.css\' 49 }] 50 } 51 }, 52 //压缩HTML 53 htmlmin: { 54 options: { 55 removeComments: true, //移除注释 56 removeCommentsFromCDATA: true, //移除来自字符数据的注释 57 collapseWhitespace: true, //无用空格 58 collapseBooleanAttributes: true, //失败的布尔属性 59 // // removeAttributeQuotes: true,//移除属性引号 有些属性不可移走引号 60 // removeRedundantAttributes: true,//移除多余的属性 61 // useShortDoctype: true,//使用短的跟元素 62 removeEmptyAttributes: true //移除空的属性 63 // removeOptionalTags: true,//移除可选附加标签 64 }, 65 //yasuo 是随意起的任务目标名 因为任务开始会迭代全部目标 因此可随意起 66 yasuo: { 67 expand: true, 68 cwd: \'src/pages\', 69 src: [\'*.html\'], 70 dest: \'dist/pages\', 71 ext: \'.html\' 72 } 73 }, 74 //压缩图片 75 imagemin: { 76 dist: { 77 options: { 78 optimizationLevel: 3 //定义 PNG 图片优化水平 79 }, 80 files: [{ 81 expand: true, 82 cwd: \'src/images\', // 图片在imagemin目录下 83 src: [\'**/*.{png,jpg,jpeg}\'], // 优化 imagemin 目录下所有 png/jpg/jpeg 图片 84 dest: \'dist/images\' // 优化后的图片保存位置，覆盖旧图片，并且不作提示 85 }] 86 } 87 }, 88 //js语法检查 89 jshint: { 90 //要检查的文件 91 files: [\'src/js/*.js\'], 92 options: { 93 globals: { 94 jQuery: true, 95 console: true, 96 module: true 97 } 98 } 99 }, 100 //js压缩 101 uglify: { 102 options: { 103 banner: \'/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n\', 104 //压缩时去除console.log 105 compress: { 106 drop_console: true 107 } 108 }, 109 static_mappings: { 110 files: [{ 111 expand: true, 112 cwd: \'src/js\', 113 src: \'*.js\', 114 dest: \'src/js/min\', 115 ext: \'.min.js\' 116 }] 117 } 118 }, 119 //合并压缩的js和css 120 concat: { 121 //合并js 122 distjs: { 123 //源文件路径+匹配模式 124 src: [\'src/js/min/*.min.js\'], 125 //合并后的文件 126 dest: \'dist/js/app.js\' 127 }, 128 //合并css 129 distcss: { 130 src: [\'src/css/*.min.css\'], 131 dest: \'dist/css/app.css\' 132 } 133 }, 134 //代码测试 135 qunit: { 136 //要测试文件 137 files: [\'dist/pages/*.html\'] 138 }, 139 //监听器 140 watch: { 141 //监听文件变化并执行相应任务 142 //表示监听src下的所有目录下的所有文件(也可以写成模板形式：<%= jshint.files %>：相当于src/js/*.js) 143 files: [\'src/**/*.*\'], 144 //文件变化时执行的任务（按顺序执行） 145 task: [\'less\', \'cssmin\', \'htmlmin\', \'imagemin\', \'jshint\', \'uglify\', \'concat\', \'qunit\'] 146 } 147 }); 148 //设置任务别名default：代表数组中的多任务，且依次执行 运行时使用grunt default（default默认不写） 149 grunt.registerTask(\'default\', [\'less\', \'cssmin\', \'htmlmin\', \'imagemin\', \'jshint\', \'uglify\', \'concat\', \'qunit\', \'watch\']); 150 };
gulp配置文件示例（gulp.js 这里使用gulp4）：
1 //gulp4核心配置文件 2 var app = { // 定义目录 3 srcPath: \'src/\', 4 distPath: \'dist/\' 5 }; 6 7 /*1.引入gulp与gulp插件 使用时，要去下载这些插件*/ 8 var gulp = require(\'gulp\'); 9 var less = require(\'gulp-less\'); 10 var cssmin = require(\'gulp-cssmin\'); 11 var uglify = require(\'gulp-uglify\'); 12 var concat = require(\'gulp-concat\'); 13 var imagemin = require(\'gulp-imagemin\'); 14 var htmlmin = require(\'gulp-htmlmin\'); 15 var rename = require(\'gulp-rename\'); 16 var qunit = require(\'gulp-qunit\'); 17 /*压缩html*/ 18 function html () { 19 //配置压缩项 20 var options = { 21 removeComments: true, //清除HTML注释 22 collapseWhitespace: true, //压缩HTML 23 collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input /> 24 removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input /> 25 removeScriptTypeAttributes: true, //删除<script>的type="text/javascript" 26 removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css" 27 minifyJS: true, //压缩页面JS 28 minifyCSS: true //压缩页面CSS 29 }; 30 /*要操作哪些文件 确定源文件地址*/ 31 gulp.src(app.srcPath + \'pages/*.html\') /*src下所有目录下的所有.html文件*/ 32 .pipe(htmlmin(options)) 33 .pipe(gulp.dest(app.distPath + \'pages\')); 34 }; 35 /*编译less生成css，压缩并合并css */ /*注意方法名不要起成less，或者cssmin，会和框架冲突 */ 36 function csstask() { 37 gulp.src(app.srcPath + \'less/*.less\') 38 .pipe(less()) 39 .pipe(gulp.dest(app.srcPath + \'css/\')) 40 /*经过压缩，放到dist目录当中*/ 41 .pipe(cssmin()) 42 .pipe(rename({ 43 extname: \'.min.css\' 44 })) 45 .pipe(gulp.dest(app.srcPath + \'css/\')) 46 .pipe(concat(\'app.css\')) 47 .pipe(gulp.dest(app.distPath + \'css\')); 48 }; 49 /*压缩并合并js*/ 50 function js() { 51 gulp.src(app.srcPath + \'js/*.js\') 52 .pipe(uglify()) 53 .pipe(rename({ 54 extname: \'.min.js\' 55 })) 56 .pipe(gulp.dest(app.srcPath + \'js/min/\')) 57 .pipe(concat(\'app.js\')) 58 .pipe(gulp.dest(app.distPath + \'js\')); 59 }; 60 /*压缩图片*/ 61 function image() { 62 gulp.src(app.srcPath + \'images/*\') 63 .pipe(imagemin()) 64 .pipe(gulp.dest(app.distPath + \'images\')); 65 }; 66 //html测试 67 function test(){ 68 gulp.src(app.distPath + \'pages/*.html\') 69 .pipe(qunit()); 70 }; 71 //当前bulid时，会自动把数组当中的所有任务给执行了。 72 // gulp.task(\'build\', [\'less\', \'html\', \'js\', \'image\', \'test\']); 73 function builder(){ 74 return gulp.series(gulp.parallel(csstask,html,js,image),test); 75 } 76 //设置监听器 77 // function watch [\'build\'], function () { 78 // /*监听哪些任务*/ 79 // // gulp.watch(\'bower_components/**/*\',[\'lib\']); 80 // gulp.watch(app.srcPath + \'/*.html\', [\'html\']); 81 // gulp.watch(app.srcPath + \'js/*.js\', [\'js\']); 82 // gulp.watch(app.srcPath + \'images/*\', [\'image\']); 83 // gulp.watch(app.srcPath + \'less/*.less\', [\'less\']); 84 // }); 85 gulp.watch(app.srcPath + \'/*.html\', html); 86 gulp.watch(app.srcPath + \'js/*.js\', js); 87 gulp.watch(app.srcPath + \'images/*\',image); 88 gulp.watch(app.srcPath + \'less/*.less\',csstask); 89 /*定义默认任务 90 * 直接执行gulp 会调用的任务 91 * */ 92 // gulp.task(\'default\', [\'watch\']); 93 exports.default=builder();
webpack配置文件示例（webpack.config.js）
1 const path = require(\'path\'); 2 const MiniCssExtractPlugin = require("mini-css-extract-plugin"); //提取成单个css文件 3 const OptimizeCssAssetsPlugin = require(\'optimize-css-assets-webpack-plugin\'); //压缩css插件 4 const HtmlWebpackPlugin = require(\'html-webpack-plugin\'); //html文件打包，压缩 5 const CleanWebpackPlugin = require("clean-webpack-plugin"); //删除原来的打包文件 6 const copyWebpackPlugin = require("copy-webpack-plugin"); //复制静态文件 7 8 module.exports = { 9 mode: \'development\', 10 entry: { //入口文件 11 index: \'./src/js/index.js\', 12 }, 13 output: { //出口文件 14 publicPath: \'\', //模板、样式、脚本、图片等资源的路径中统一会加上额外的路径 15 path: path.resolve(__dirname, \'dist\'), 16 filename: \'./js/[name].[hash:8].js\' 17 }, 18 module: { 19 rules: [ 20 { 21 test: /\.html$/, 22 use: { 23 loader: \'html-loader\', 24 options: { 25 26 } 27 } 28 }, 29 { 30 test: /\.js$/, 31 // exclude: /node_modules/, 32 exclude: path.resolve(__dirname, \'node_modules\'), //编译时，不需要编译哪些文件 33 //include: path.resolve(__dirname, \'src\'),//在config中查看 编译时，需要包含哪些文件 34 loader: \'babel-loader\', 35 query: { 36 presets: [\'latest\'] //按照最新的ES6语法规则去转换 37 } 38 }, 39 { 40 test: /\.css$/, 41 use: [ 42 // {loader: "style-loader"}, //在页面内嵌入css 43 { 44 loader: MiniCssExtractPlugin.loader, 45 options: { 46 // 这里可以指定一个 publicPath 47 // 默认使用 webpackOptions.output中的publicPath 48 publicPath: \'../\' 49 } 50 }, //单独抽离css 51 {loader: "css-loader"}, 52 { //自动添加前缀 53 loader: "postcss-loader", 54 options: { 55 plugins: [ 56 require("autoprefixer") 57 ] 58 } 59 } 60 ] 61 }, 62 { 63 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 64 loader: \'url-loader\', 65 options: { 66 limit: 100, 67 name: \'./img/[name].[hash:7].[ext]\', 68 } 69 }, 70 ] 71 }, 72 plugins: [ 73 new CleanWebpackPlugin(), //删除上次打包文件，默认目录\'./dist\' 74 new copyWebpackPlugin([{ //静态资源输出,将src目录下的assets文件夹复制到dist目录下 75 from: path.join(__dirname, "./src/assets"), 76 to: path.join(__dirname, "./dist/assets"), 77 }]), 78 new MiniCssExtractPlugin({ 79 filename: "./css/[name].[hash:8].css" 80 }), 81 new OptimizeCssAssetsPlugin(), //压缩css文件 82 new HtmlWebpackPlugin({ 83 favicon: \'./src/img/favicon.ico\', //图标 84 template: \'./src/index.html\', //指定要打包的html 85 filename:\'index.html\', //指定输出路径和文件名 86 minify: { //压缩 87 removeComments: true, //移除HTML中的注释 88 collapseWhitespace:true, //删除空白符与换行符 89 removeAttributeQuotes: true //去除属性引用 90 } 91 }), 92 // new HtmlWebpackPlugin(//打包第二个页面 93 // { 94 // template: \'./app/src/page/index2.html\', 95 // filename:\'./page/index2.html\' 96 // } 97 // ) 98 ] 99 };
注：以上配置文件仅是简单示例，具体功能需要实际选择和配置