前言
关于自动化构建
中途如果遭遇挫折，运行失败，或者打退堂鼓，请直接查看 小结 部分，有我的 最终攻略
除了第一节介绍的脚手架，自动化构建也是前端工程化中非常重要的组成部分。它使我们可以在开发环境中使用es6新特性、sass、模板引擎等高效率语法，自动转换为浏览器支持的特性，帮我们脱离开发环境兼容带来的问题，解决重复且无聊的操作。
常用的自动化构建工具以及各自特点：
npm scripts：是实现自动化构建工作流最简单的方式，简单的构建过程可以使用，复杂的不适应。
grunt：工作过程基于临时文件（硬盘读写）实现，构建速度相对较慢。现在不常用了。
gulp：基于内存实现，速度更快。常用。
fis：大而全，将典型需求集中到了内部，可直接使用。
npm scripts
npm scripts 是实现自动化构建工作流最简单的方式
简单演示：1.将src中的sass文件自动编译为css文件。2.启动一个服务器运行项目。 3.检测到scss文件变化，自动编译，编译后在自动更新到浏览器。
下载依赖
npm i sass --dev //编译
npm i browser-sync --dev //启动服务器
复制代码
让项目先build，再serve
// package.json
"scripts": {
"build": "sass scss/main.scss css/style.css ",
"preserve": "npm run build",
"serve": "browser-sync . "
},
复制代码
让项目被自动检测：既要监测变化，又要启动服务器————需要同时执行多个任务，需要npm-run-all依赖 npm i npm-run-all --dev
// package.json
"scripts": {
"build": "sass scss/main.scss css/style.css --watch",
"serve": "browser-sync . --files \"css/*.css\"",
"start": "run-p build serve"
},
复制代码
grunt
tips：了解，为看源码准备。目前用的不多
基本使用
初始化项目与下载依赖
npm init --yes
npm install grunt --dev
复制代码
根目录下创建gruntfile.js文件，常用api：registerTask设置任务
// Grunt 的入口文件
// 用于定义一些需要 Grunt 自动执行的任务
// 需要导出一个函数
// 此函数接收一个 grunt 的对象类型的形参
// grunt 对象中提供一些创建任务时会用到的 API
module.exports = grunt => {
grunt.registerTask('bar', () => {
console.log('other task')
})
// // default 是默认任务名称
// // 通过 grunt 执行时可以省略
// grunt.registerTask('default', () => {
// console.log('default task')
// })
// 第二个参数可以指定此任务的映射任务，
// 这样执行 default 就相当于执行对应的任务
// 这里映射的任务会按顺序依次执行，不会同步执行
grunt.registerTask('default', ['foo', 'bar'])
}
复制代码
运行 npx gulp 或者 npx gulp bar 测试
插件
插件机制：插件内部封装了通用的构建任务，不用自己手动设置。
initConfig设置配置，loadNpmTasks加载插件（插件要install）
grunt.initConfig({
clean: {
temp: 'temp/**'
}
})
grunt.loadNpmTasks('grunt-contrib-clean')
复制代码
常用插件：- 运行 npx gulp 或者 npx gulp sass 等测试
const sass = require('sass') //编译sass文件
const loadGruntTasks = require('load-grunt-tasks') //自动加载插件
module.exports = grunt => {
grunt.initConfig({
sass:{
options: {
sourceMap: true,
implementation: sass
},
main:{
files :{
'dist/css/main.css':'src/scss/main.scss'
}
}
},
babel: {
options: {
sourceMap: true,
presets: ['@babel/preset-env']
},
main: {
files: {
'dist/js/app.js':'src/js/app.js'
}
}
},
watch: {
js: {
files: ['src/js/*.js'],
tasks: ['babel']
},
css: {
files: ['src/scss/*.scss'],
tasks: ['sass']
}
}
}),
// grunt.loadNpmTasks('grunt-contrib-clean')
// grunt.loadNpmTasks('grunt-sass')
loadGruntTasks(grunt)
grunt.registerTask('default',['sass','babel','watch'])
}
复制代码
gulp
最流行的前端构建框架，其核心特点是：高效、易用。
基本使用：
install gulp依赖——gulpfile.js文件，自定义构建任务——cli执行任务并测试
//gulpfile.js
// gulp 的任务函数都是异步的
// 可以通过调用回调函数标识任务完成
exports.foo = done => {
console.log('foo task working~')
done() // 标识任务执行完成
}
// default 是默认任务
// 在运行是可以省略任务名参数
exports.default = done => {
console.log('default task working~')
done()
}
复制代码
集成案例
样式编译 依赖：gulp-sass
const style = () => {
return src('src/assets/styles/*.scss', { base: 'src' })
.pipe(plugins.sass({ outputStyle: 'expanded' }))
.pipe(dest('temp'))
.pipe(bs.reload({ stream: true }))
}
复制代码
脚本编译 依赖：gulp-babel
const script = () => {
return src('src/assets/scripts/*.js', { base: 'src' })
.pipe(plugins.babel({ presets: ['@babel/preset-env'] }))
.pipe(dest('temp'))
.pipe(bs.reload({ stream: true }))
}
复制代码
模板文件编译 依赖：gulp-swig
const page = () => {
return src('src/*.html', { base: 'src' })
.pipe(plugins.swig({ data, defaults: { cache: false } })) // 防止模板缓存导致页面不能及时更新
.pipe(dest('temp'))
.pipe(bs.reload({ stream: true }))
}
复制代码
图片压缩 依赖：gulp-imagemin
const image = () => {
return src('src/assets/images/**', { base: 'src' })
.pipe(plugins.imagemin())
.pipe(dest('dist'))
}
复制代码
public文件拷贝
const extra = () => {
return src('public/**', { base: 'public' })
.pipe(dest('dist'))
}
复制代码
热更新服务器
const serve = () => {
watch('src/assets/styles/*.scss', style)
watch('src/assets/scripts/*.js', script)
watch('src/*.html', page)
// watch('src/assets/images/**', image)
// watch('src/assets/fonts/**', font)
// watch('public/**', extra)
watch([
'src/assets/images/**',
'src/assets/fonts/**',
'public/**'
], bs.reload)
bs.init({
notify: false,
port: 2080,
// open: false,
// files: 'dist/**',
server: {
baseDir: ['temp', 'src', 'public'],
routes: {
'/node_modules': 'node_modules'
}
}
})
}
复制代码
node_modules build时 引用处理与压缩
const useref = () => {
return src('temp/*.html', { base: 'temp' })
.pipe(plugins.useref({ searchPath: ['temp', '.'] }))
// html js css
.pipe(plugins.if(/\.js$/, plugins.uglify()))
.pipe(plugins.if(/\.css$/, plugins.cleanCss()))
.pipe(plugins.if(/\.html$/, plugins.htmlmin({
collapseWhitespace: true,
minifyCSS: true,
minifyJS: true
})))
.pipe(dest('dist'))
}
复制代码
清理 编译文件
const clean = () => {
return del(['dist', 'temp'])
}
复制代码
微任务合并正好为常见任务
const compile = parallel(style, script, page)
// 上线之前执行的任务
const build = series(
clean,
parallel(
series(compile, useref),
image,
font,
extra
)
)
const develop = series(compile, serve)
复制代码
fis
概述
主要特点是高度集成，将前端日常开发过程中常见的构建任务，还有调试任务都集中到了内部。不需要自定义任务，可以通过配置，使用内部任务，自动完成整个构建过程。但是也缺失了灵活性。
简单使用
npm install fis3 -g
fis3 目录 -d 输出目录
//fis-conf.js
fis.match('*.{js,scss,png}',{
release:'/assets/$0'
})
复制代码
编译与压缩
//fis-conf.js
fis.match('**/*.scss',{
rExt: '.css',
parser:fis.plugin('node-sass'),
optimizer:fis.plugin('clean-css')
})
fis.match('**/*.js',{
rExt: '.js',
parser:fis.plugin('babel-6.x'),
optimizer:fis.plugin('uglify-js')
})
复制代码
小结
关于自动化构建项目，往小了说主要就是选择技术（gulp、grunt、fis...），然后去官网查询符合需求的插件，下载插件并按照文档要求配置后，运行命令行使用即可。 往大了说，使用过程中，还是会涉及很多其他相关的知识点的。仅凭一篇文章，肯定是难以掌握透彻。不过可以在脑海中先搭建好基本体系架构，了解其使用原理，在日常使用中，先简单尝试。碰见问题了，在逐一攻破，或者查找资料，最终一定能越来越清晰明了。
一攻破，或者查找资料，最终一定能越来越清晰明了。
最终攻略
终极攻略就是， 遇到挫折别放弃，休息片刻继续走 。跟着文档练习的过程中，一定会出现一些问题，出现问题不可怕，一定要想办法解决它。我跟着视频课程一步一步的做，还经常出现各种问题，需要连线老师寻求帮助，有时候甚至还需要老师帮我看代码，语音通话一点一点的告诉我怎么改，才能解决呢。更何况你只是看着文档，所以有了问题不要害怕，实在不知道怎么办的时候，也可以来问我。（ps一句： 如果你公司有大佬，一定要多问大佬，如果没有，一定要想办法找到大佬。因为有时候他们的一句话，可能直接帮你避免一整天没有意义的找错 。）
饮水思源，还是很感谢明教的老师的，太耐心了。好多时候我都不想看的时候，是他们帮我找到原因，推着我继续前进的，哈哈。好幸运能碰见你们，让我觉得报班不是糟践钱。
再送一波福利给大家
整理这个的是一些大企业的大佬，认真地和他们学习了很多经验以及获取了很多直观的资料，现在全部拿出来奉献给大家！
想系统学习WEB前端的朋友，可以加这边的交流裙（1146649671）学习资料、面试资料、视频资源，资源给你们拉满，不见不散哦~
网友评论