工程化概述
工程化定义及意义：
工程化：按照一定标准，通过工具来提高效率的一种手段
解决的问题：
- 传统语言或者语法的弊端
- 无法使用模块化/组件化
- 重复的机械式工作
- 代码风格统一、质量保证
- 依赖后端服务接口支持
- 整体依赖后端项目
脚手架工具
Yeoman
- 安装yeoman：在安装node之后，通过nmp或者yarn安装
//yarn
yarn global add yo
//cnpm
cnpm install -g yo
- 安装generator:
npm install -g generator-node
- yeoman的yo node命令创建node module,配置相关项目信息
yo node
Yeoman使用步骤：
- 明确需求
- 找到合适的Generator
- 全局范围安装找到的Generator
- 通过Yo运行对应的Generator
- 通过命令行交互填写选项
- 生成所需要的项目结构
脚手架工作原理
- 新建一个脚手架文件夹
- 文件夹中package.json文件中添加配置cli的入口文件
"bin":"cli.js",
- cli.js文件中实现脚手架具体工作过程:
Node CLI应用入口文件必须有文件头：
#!/usr/bin/env node
tips：Linux或者MAC系统还需要修改此文件的读写权限。
具体实现是在命令行终端中chmod 755 cli.js命令。
-
脚手架具体工作过程：
1、通过命令行交互询问用户问题
2、根据用户回答的结果生成文件 -
node中命令行交互询问需要用到inquirer模块。所以先进行模块安装
yarn add inquirer
- inquirer模块prompt进行问题询问：
接受一个数组参数。每个成员就是我们发起的一行询问问题。type:输入方式；name:问题返回值对应的键；message:屏幕上显示的问题提示。
then方法中可以拿到接收到的答案信息。
- 根据回答结果生成文件：
文件操作需要使用到path模块、ejs模板引擎模块、fs模块等。
先在cli.js文件中引入模块
#!/usr/bin/env node
const fs = require('fs')
const inquirer = require('inquirer')
const path = require('path')
const ejs = require('ejs')
inquirer.prompt([
{
type:'input',
name:'name',
message:'Project name?'
}
])
.then(answer => {
// console.log(answer)
//模板目录
const tmplDir = path.join(__dirname,'templates')
//目标目录
const destDir = process.cwd()
//将模板下的文件全部转换到目标目录
fs.readdir(tmplDir,(err,files) => {
if(err) throw err
files.forEach(file => {
//通过模板引擎渲染文件
ejs.renderFile(path.join(tmplDir,file),answer,(err,result) => {
if (err) throw err
fs.writeFileSync(path.join(destDir,file),result)
})
})
})
})
自动化构建
常用的自动化构建工具
Grunt、Gulp、FIS
Grunt基本用法：
- init文件夹
yarn init --yes
- 安装grunt
yarn add grunt
- 新增gruntfile.js文件
gruntfile.js是Grunt的入口文件，用于定义一些需要Grunt自动执行的任务。需要导出一个函数，此函数接收一个Grunt的形参，内部提供一些创建任务时可以用到API - 通过module.export输出Grunt函数
- grunt的registerTask注册任务，第一个参数是任务名称，另外一个参数是任务回调函数。如果第二个参数是字符串，则字符串成为任务的描述信息。可通过 grunt help查看。
- 运行grunt中的任务
yarn grunt 任务名
- grunt的默认任务为’default’。默认任务还可以是任务数组，第二个参数依次传递任务名的数组。
eg:
module.exports = grunt => {
grunt.registerTask('foo',() => {
console.log('hello grunt')
})
grunt.registerTask('bar',() => {
console.log('other task')
})
grunt.registerTask('default',['foo','bar'])
}
- 异步任务
异步任务需要通过this.async实现。
grunt.registerTask('async-task',function(){
const done = this.async()
setTimeout(() => {
console.log('async task')
done()
},1000)
})
grunt标记任务失败
return false标记失败。且是多个任务数组时，失败任务之后的任务不会继续执行。–force可强制全部执行。
异步任务通过给done传实参false来标记任务失败
grunt配置
initConfig键值对的方式配置值。config.键名获取配置的值
grunt.initConfig({
'foo':'bar'
})
grunt.registerTask('foo',() => {
console.log(grunt.config('foo'))
})
多目标任务
registerMultiTask。接受的参数也是任务名称及回调函数。
多目标任务需要先initConfig配置目标。每个子目标可以通过任务名：目标名运行。但config中通过关键词options配置的是任务选项，而不是目标。可以通过this的options方法获取到任务选项的配置信息。
Grunt插件的使用
- 安装插件。
- grunt的loadNpmTasks方法加载插件。插件的命名一般都是：grunt-contrib-任务名。
- initConfig中配置插件任务。插件任务本质是一个多目标任务。
- 运行：yarn grunt 任务名
Grunt常用插件
sass：需要同时安装grunt-sass插件和sass模块
module.exports = grunt => {
grunt.initConfig({
sass:{
optionss:{
//还可以配置sourceMap,生成对应的map文件
sourceMap:true,
//sass文件编译的方式
implementation:sass
},
main:{
files:{
//转义后的css文件路径：编译前sass文件位置
'dist/css/main.css':'src/scss/mian.scss'
}
}
}
})
grunt.loadNpmTasks('grunt-sass')
}
es6的编译插件babel：需要安装grunt-babel插件以及babel私有名称@babel/core、babel的预设@babel/preset-env.
文件修改后自动编译。需要安装grunt-contrib-watch.
加载所有插件
为了避免每次插件都通过loadNpmTasks手动加载，可通过load-grunt-tasks模块一次性加载所有grunt插件。
- 通过命令行安装模块
yarn add load-grunt-tasks --dev
- 文件中引入模块并使用
- 运行：yarn grunt babel
const sass = require('sass')
const loadGruntTasks = require('load-grunt-tasks')
module.exports = grunt => {
grunt.initConfig({
sass:{
options:{
//sass文件编译的方式
implementation:sass
},
main:{
files:{
//转义后的css文件路径：编译前sass文件位置
'dist/css/main.css':'src/scss/mian.scss'
}
}
},
babel:{
options:{
presets:['@babel/preset-env']
},
main:{
files:{
'dist/js/app.js':'src/js/app/js'
}
}
}
})
loadGruntTasks(grunt)//自动加载所有grunt插件中的任务
}
Gulp
####基本使用流程：
- init初始化代码包
- 安装gulp
- 创建gulpfile.js文件
- exports输出任务
- yarn gulp 任务名执行任务
gulp组合任务
都需要先require引入。
const {series,paraller} = require('gulp')
series串行任务
parallel并行任务
gulp核心工作原理
- 输入读取流
- 加工转换流
- 输出写入流
const fs = require('fs')
const {Transform} = require('stream')
exports.default = () => {
//文件流读取
const read = fs.createReadStream('nolmalize.css')
//文件写入流
const write = fs.createWriteStream('nolmalize.min.css')
//文件转换流
const transform = new Transform({
transform:(chunk,encodeing,callback) => {
//核心转换过程实现
//chunk => 读取流中读取到的内容
const input = chunk.toString()
const output = input.replace(/\s+/g,'').replace(/\/\*.+?\*\//g,'')
callback(null,output)
}
})
//把读取出来的文件流导入写入文件流
read
.pipe(transform)//转换
.pipe(write)//写入
return read
}
文件操作API
src(读取流文件路径）读取文件
dest(写入流文件路径） 写入文件
src.pipe(dest)将读取文件映射到写入文件。
自动加载插件
安装并引入gulp-load-plugins
- 命令行安装：
yarn add gulp-load-plugins
- gulpfile.js文件引入：
const loadPlugins = require('gulp-load-plugins')
- 得到plugins方法。并使用其插件属性方法。
插件gulp-a-b的插件会被转换为驼峰命名aB
const plugins = loadPlugins()
//plugins.src()·替换原来的src()
开发服务器
browser-sync插件创建一个开发服务器,用于开发阶段的调试和热加载。creat方法创建服务器，init方法中配置服务器参数。其中baseDir是网站的根目录。 routes中科配置其余引用文件的路径。设置notify:false可关闭未加载完成等提示信息。port可设置服务器端口号。open设置是否自动打开浏览器。files监听指定位置文件变化时刷新加载。
监听文件变化及构建优化
- gulp的watch这个api可以监听文件的变化。因此使用这个API监听文件的变化，然后进行相应的编译工作。watch(监听文件路径，回调函数)
- 一般开发阶段监听文件变化预加载只是针对js、css、html这些需要编译的文件，而图片字体压缩和其余文件的拷贝不需要热加载进行调试。所以将不需要监听的文件放在服务器根目录数组中。服务器会根据顺序依次查找文件。
- 图片、字体等文件发生变化之后，只需要调用服务器的reload()方法刷新浏览器即可。
useref文件引用处理
gulp-useref插件将引用依赖文件打包成一个文件.
文件压缩
gulp-htmlmin、gulp-uglify、gulp-clean-css分别对html、js、css文件进行压缩。gulp-if用于判断文件流的文件类型。gulp-htmlmin压缩只会删除空格，如果需要完全压缩，设置collapseWhitespace:true折叠空白字符和换行符。minifyCss、minifyJs设置为true可将页面内style和script标签内的脚本进行压缩。
其余构建优化
- useref对引用依赖文件进行压缩，同时又进行编译构建的话，容易产生冲突。所以将编译构建的文件放在一个中间目录下，而不是服务器直接访问的打包文件下。将useref处理之后的文件放在最终的dist文件中。
- 为了更便捷执行自动化构建，可以将gulp中需要暴露到外部的命令包裹在scripts中。在package.json文件中设置scripts快捷命令。直接通过yarn(或者npm run）快捷命令名称运行进行自动化构建。
696
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
