前端工程化(2)—带你了解项目的自动化构建

微信扫一扫,分享到朋友圈

前端工程化(2)—带你了解项目的自动化构建

文章内容输出来源: 拉勾教育大前端高薪训练营;

前言

关于自动化构建

(此文章干货很多,中途如果遭遇挫折,运行失败,或者打退堂鼓,请直接查看 总结 部分,有我的 终极攻略 :blush:)

除了第一节介绍的脚手架,自动化构建也是前端工程化中非常重要的组成部分。它使我们可以在开发环境中使用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一句: 如果你公司有大佬,一定要多问大佬,如果没有,一定要想办法找到大佬。因为有时候他们的一句话,可能直接帮你避免一整天没有意义的找错 。)

饮水思源,还是很感谢拉勾的老师的,太耐心了。好多时候我都不想看的时候,是他们帮我找到原因,推着我继续前进的,哈哈。好幸运能碰见你们,让我觉得报班不是糟践钱。

感谢观看,因个人精力加能力有限,分享过程中,难免不能没有任何纰漏或者错误,如果有不对的地方,欢迎在下方评论区与我互动。

微信扫一扫,分享到朋友圈

前端工程化(2)—带你了解项目的自动化构建

抖音及TikTok8月下载量还是第一 下载量超6330万次

上一篇

星际访客“奥陌陌”或是一团宇宙“尘兔”

下一篇

你也可能喜欢

前端工程化(2)—带你了解项目的自动化构建

长按储存图像,分享给朋友