本文介绍了前端构建工具Grunt、Gulp和webpack的使用，包括它们的基本概念、主要任务（如文件合并、压缩、语法检查等）、自动化构建过程，以及如何处理ES6代码。此外，还探讨了各工具的特点，如Gulp的高效性，webpack的模块打包和优化能力，以及它们的配置和插件系统。最后，文章提到了webpack5的一些变化，如自动删除Node.js Polyfills和新的Chunk ID算法。
Grunt项目构建
概述
项目构建就是并编译, 合并, 压缩项目中的JS, SASS, LESS文件; 压缩HTML资源文件; JS语法检查
Grunt就是用来进行自动化项目构建的, Grunt由一组插件组成, 围绕Grunt工作实现自动化, 常见的功能有
- 合并JS/CSS
- 压缩JS/CSS
- JS语法检查
- LESS/SESS的预编译
目录结构
├── build // 生成构建文件所在文件夹
├── Gruntfile.js // grunt配置文件, 首字母大写, 与.bablerc配置差不多
├── index.html
├── package.json
└── src // 源码文件
├── css
└── js
安装Grunt
sudo npm install grunt-cli -g
npm install grunt --include=dev
Geuntrc.js配置
使用js语法配置, 支持CommonJS规范, 配置方法
module.exports = function(grunt){
// 初始化配置grunt任务
grunt.initConfig({
});
// grunt执行的时候需要的任务插件(随便写了一个插件)
grunt.loadNpmTasks('grunt-contrib-uglify');
// 注册Grunt的默认任务, 与执行任务的时候的依赖任务
grunt.registerTask('default',['uglify']);
}
常用任务插件(先了解下)
- grunt-contrib-concat——合并多个文件的代码到一个文件中
- grunt-contrib-clean——清除文件(打包处理生成的)
- 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——实时监控文件变化、调用相应的任务重新执行
合并JS-concat插件
最好去官网找说明
npm install grunt-contrib-concat --include=dev
引入包
grunt.loadNpmTasks('grunt-contrib-concat');
在using example中找到配置示例
module.exports = function (grunt) {
// 初始化配置grunt任务
grunt.initConfig({
concat: {
options: {
separator: ';', // 链接符号
},
dist: {
src: ['src/js/*.js'], // 合并哪些文件
dest: 'dist/built.js', // 输出目录
},
},
});
// grunt执行的时候需要的任务插件
grunt.loadNpmTasks('grunt-contrib-concat');
// 注册Grunt的默认任务, 与执行任务的时候的依赖任务
grunt.registerTask('default', ['concat']);
}
执行命令(当然, 我们注册了默认任务, 可以不写concat)
grunt concat
压缩JS-uglify
module.exports = function (grunt) {
// 初始化配置grunt任务
grunt.initConfig({
concat: {
options: {
separator: ';', // 链接符号
},
dist: {
src: ['src/js/*.js'], // 合并哪些文件
dest: 'dist/built.js', // 输出目录
},
},
uglify: {
my_target: {
files: {
'dist/output.min.js': ['src/js/test1.js']
}
}
}
});
// grunt执行的时候需要的任务插件
grunt.loadNpmTasks('grunt-contrib-concat'); +
grunt.loadNpmTasks('grunt-contrib-uglify');
// 注册Grunt的默认任务, 与执行任务的时候的依赖任务
grunt.registerTask('default', ['concat', 'uglify']); // 注意, 任务应该有序给出, Grunt执行任务是同步的
}
npm install grunt-contrib-uglify
grunt uglify
语法检查-jshint
npm install grunt-contrib-jshint -dev
加载插件
grunt.loadNpmTasks('grunt-contrib-jshint');
注册到任务
grunt.registerTask('default', ['concat', 'uglify', 'jshint']);
在与Gruntfile.js同目录创建配置文件.jshintrc, 举例
{
"curly": true,
"eqeqeq": true,
"eqnull": true,
"expr" : true,
"immed": true,
"newcap": true,
"noempty": true,
"noarg": true,
"regexp": true,
"browser": true,
"devel": true,
"node": true,
"boss": false,
//不能使用未定义的变量
"undef": true,
//语句后面必须有分号
"asi": false,
//预定义不检查的全局变量
"predef": [ "define", "BMap", "angular", "BMAP_STATUS_SUCCESS"]
}
增加配置内容
jshint : {
options: {
jshintrc : '.jshintrc' //指定配置文件
},
build : ['Gruntfile.js', 'src/js/*.js'] //指定检查的文件
}
合并压缩CSS-cssmin
npm install grunt-contrib-cssmin -dev
配置Gruntfile.js
cssmin:{
options: {
// 保证结果准确
shorthandCompacting: false, // 快速压缩
roundingPrecision: -1 // 精度-1
},
build: {
files: {
'build/css/output.min.css': ['src/css/*.css']
}
}
}
添加与注册插件: 略
自动化构建插件-watch
npm install grunt-contrib-watch -dev
配置任务:
watch : {
scripts : {
files : ['src/js/*.js', 'src/css/*.css'], // 需要的文件
tasks : ['concat', 'jshint', 'uglify', 'cssmin'], // 执行队列
options : {
spawn : false} // 是否全量更新(例如css修改, 是否重新编译js)
}
}
加载任务
grunt.loadNpmTasks('grunt-contrib-watch');
注册任务:
grunt.registerTask('default', ['concat', 'uglify', 'watch']);
命令:
grunt //控制台提示watch已经开始监听, 修改保存后自动编译处理
或者
注册任务:
grunt.registerTask('default', ['concat', 'uglify']);
grunt.registerTask('myWatch', ['default','watch']);
命令:
grunt myWatch
关于ES6
Grunt插件不支持ES6, 所以处理ES6代码时候应该先使用babel转换, 然后再Grunt
Gulp项目构建
概述
Gulp是与Grunt功能类似的更加高效的前端项目构建工具, 可以基于Node自动的完成代码的检查, 压缩, 合并, 监听, 测试等. 具有如下特点
- 任务化: 所有的事件都有一个统一的接口, 不论做什么都要先去注册一个任务
- 基于流: 基于数据流, Gulp有自己的内存, 在调用Gulp的时候, 程序会将目标文件读入Gulp内存中, 然后通过IO输出数据
- 执行任务可以同步,也可以异步
- 与Grunt一样不支持ES6,如需使用请提前Babel
重要API
gulp.src(path): 根据路径读取源文件gulp.dest(path): 根据路径输出文件gulp.task(name[,deps],fn): 调取命令gulp.wartch(glob[,opts],tasks)或gulp.wartch(glob[,opts,cb]): 文件发生变动时修改
文件结构
├── dist
├── gulpfile.js
├── index.html
├── package.json
└── src
├── css
├── js
└── less
全局与局部安装
npm install gulp -g
npm install gulp --include=dev
gulpfile.js的配置
-
任务的创建
-
注册任务与默认任务
任务有公开任务与是有任务, 公开任务中的default可以直接使用glup调用- 公开任务（Public tasks） 从 gulpfile 中被导出（export），可以通过 gulp 命令直接调用。
- 私有任务（Private tasks） 被设计为在内部使用，通常作为 series() 或 parallel() 组合的组成部分。
可以使用tasks创建任务, 私有任务无法直接被调用, 如果希望直接调用需要exports导出
-
组合任务
Gulp支持与Grunt类似的任务组合, 组合任务有series(task1, task2...)和parallel(task1, task2...), 两者可以相互嵌套, 区别是series是同步的,parallel是异步的, 两者无限嵌套就实现了依赖处理, 例如:const { series } = require('gulp'); // `clean` 函数并未被导出（export），因此被认为是私有任务（private task）。 // 它仍然可以被用在 `series()` 组合中。 function clean(cb) { // body omitted cb(); } // `build` 函数被导出（export）了，因此它是一个公开任务（public task），并且可以被 `gulp` 命令直接调用。 // 它也仍然可以被用在 `series()` 组合中。 function build(cb) { // body omitted cb(); } exports.build = build; exports.default = series(clean, build); // 组合任务输出
-
-
常见插件
- gulp-concat : 合并文件(js/css)
- gulp-uglify : 压缩js文件
- gulp-rename : 文件重命名
- gulp-less : 编译less
- gulp-clean-css : 压缩css
- gulp-livereload : 实时自动编译刷新
合并压缩JS文件-concat/uglify/rename
安装(注意这里需要对文件进行管道等操作所以要多下载包)
npm install gulp-concat gulp-uglify gulp-rename -dev
配置文件
var gulp = require('gulp'); // 引入
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
function ChuLiJS() {
// ! 虽然没有return也可以执行, 但是"玄学上"有return的话执行结束才会释放GULP空间
return gulp.src('./src/js/*.js') // 源文件 =管道=>
.pipe(concat('all.js')) // 合并成 =管道=>
.pipe(gulp.dest('./dist/')) // 输出到 =管道=>
.pipe(uglify()) // 压缩文件 =管道=>
.pipe(rename({
suffix: '.min'})) // 重命名(仅修改后缀, 不动扩展名) =管道=>
.pipe(gulp.dest('./dist/')) // 输出到
}
exports.ChuLiJS = ChuLiJS;
转译Less合并压缩CSS文件-less与clean-css
安装
npm install gulp-less gulp-clean-css -dev
配置文件
var gulp = require('gulp'); // 引入
var concat = require('gulp-concat');
var less = require('gulp-less');
var cleanCss = require('gulp-clean-css');
function ChuLiLess() {
return gulp.src('./src/less/*.less') // 源文件 =管道=>
.pipe(less()) // 编译成 =管道=>
.pipe(gulp.dest('./src/css/')) // 输出到
}
function ChuLiCss() {
return gulp.src('./src/css/*.css') // 源文件 =管道=>
.pipe(concat('build.css')) // 合并成 =管道=>
最低0.47元/天 解锁文章
扫一扫
1349
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
