本文为拉勾网大前端高薪训练营第一期笔记
自动化步骤
- 创建项目
- 编码
- 格式化代码
- 校验代码风格
- 编译/构建/打包
- 预览/测试
- Web Server/Mock
- Live Reloading/HMR
- Source Map
- 提交
- Git Hooks
- Lint-staged
- 持续集成
- 部署
- CI/CD
- 自动发布
5个维度讲解前端工程化
- 脚手架工具开发
- 自动化构建系统
- 模块化打包
- 项目代码规范化
- 自动化部署
常见创建脚手架
create-react-app
vue-cli
angular-cli
yeoman
Install yeoman
yarn global add yo
yarn global add generator-node
mkdir my-module
cd my-module
yo node //generator-node
//sub generator:
//node:boilerplate
//node:cli
//node:editorconfig
//node:eslint
//node:git
//node:readme
yo node:cli //sub generator
yarn
yarn link / npm link
my-module --help
**// yarn link permission denied
// use npm instead or chmod +x a.js**
Yeoman使用步骤
- 明确需求
- 找到合适的generator
- 全局范围安装generator
- yo运行对应的generator
- 通过命令行交互填写选项
- 生成所需要的项目结构
加速c++库的npm镜像
#mirror config
sharp_dist_base_url = https://npm.taobao.org/mirrors/sharp-libvips/v8.9.1/
profiler_binary_host_mirror = https://npm.taobao.org/mirrors/node-inspector/
fse_binary_host_mirror = https://npm.taobao.org/mirrors/fsevents
node_splite3_binary_host_mirror = https://npm.taobao.org/mirrors
splite3_binary_host_mirror = https://npm.taobao.org/mirrors
splite3_binary_site = https://npm.taobao.org/mirrors/sqlite3
sass_binary_site = https://npm.taobao.org/mirrors/node-sass
electron_mirror = https://npm.taobao.org/mirrors/electron/
puppeteer_download_host = https://npm.taobao.org/mirrors
chromedriver_cdnurl = https://npm.taobao.org/mirrors/chromedriver
operadriver_cdnurl = https://npm.taobao.org/mirrors/operadriver
phantomjs_cdnurl = https://npm.taobao.org/mirrors/phantomjs
python_mirror = https://npm.taobao.org/mirrors/python
registry = https://registry.npm.taobao.org
disturl = https://npm.taobao.org/dist
npm config set sharp_dist_base_url https://npm.taobao.org/mirrors/sharp-libvips/v8.9.1/
or
modify /Users/<USER>/.npmrc
创建自己的generator
mkdir generator-sample
cd generator-sample
yarn init
yarn add yeoman-generator
generators/
app/
templates/
index.js
package.json
用this.fs.write或者用模板
ejs模板标记如果想原封不动输出的话,多加一个%在前一个%后
<%%= BASE_URL %>
发布generator
echo node_modules > .gitignore
如果是taobao npm registry的话需要改回yarn,因为taobao的是只读的
yarn publish —registry=https://registry.yarnpkg.com
小型脚手架Plop
yarn add plop --dev
vi plopfile.js
//具体看代码
可以一个命令生成一批按模板生成的文件,方便批量增加模块
脚手架scaffolding原理
package.json里增加"bin": “cli.js”,
cli.js里需要首行文件头 #!/usr/bin/env node
macos下还需要chmod 755 cli.js
inquirer用来拿到input
ejs作为模板引擎
自动化构建初体验
npm scripts
"scripts":{
"build": "sass scss/main.scss css/styles.css --watch",
"preserve": "yarn build",
"serve": "browser-sync . --files \"css/*.css"\",
"start": "run-p build serve"
}
yarn add browser-sync npm-run-all --dev
自动化构建工具
- grunt:基于临时文件,会有大量文件读写
- gulp:基于内存
- fis:百度做的自动化构建工具,很多预设方案
Grunt异步任务
gruntfile.js
const done = this.async()
然后在异步任务结束后done()
任务失败在function里return false,如果是异步任务就done(false)
这个任务失败的后续的任务就不会执行,除非加了—force
grunt支持config,grunt.initConfig({foo:{bar: 123}})
使用时grunt.config(‘foo.bar’)
grunt子任务
grunt.initConfig({
build: {
options: {foo: 'bar'}
foo: {
options: {foo: 'bar1'}
},
bar: '456'
}
})
grunt.registerMultiTask('build', function () {
console.log(this.options())
console.log(`task: build, target: ${this.target}, data: ${this.data}`)
})
使用插件
grunt.initConfig({
clean: {
temp: 'temp/**'
}
})
grunt.loadNpmTasks('grunt-contrib-clean')
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-sass')
loadGruntTasks(grunt) // 自动加载所有的 grunt 插件中的任务
grunt.registerTask('default', ['sass', 'babel', 'watch'])
用load-grunt-tasks节省一个个load task
gulp
4.0之后可以用exports.default = done ⇒ {console.log(‘123’); done()}的方式定义任务
4.0之前需要const gulp = require(‘gulp’) gulp.task(‘default’, done ⇒ {console.log(‘123’); done()})
const {series, parallel} = require('gulp')
支持promise async stream几种模式
gulp是pipe的方式,方便管道多步加工
插件列表
gulp-clean-css 压缩css
gulp-rename 重命名后缀
gulp-sass sass转css
gulp-babel js新语法转es5
gulp-imagemin 压缩图片
gulp-htmlmin 压缩html,想去换行符,压缩内嵌css,js,{collapseWhitespace: true, minifyCSS: true,minifyJS: true},还可以去注释,去空属性
gulp-uglify 压缩js
gulp-if 判断pipe里的文件,第一个参数是正则,第二个是执行的转换流
gulp-load-plugins自动加载所有gulp plugins
sass({outputStyle: ‘expanded’})
src时候加第二个参数{base:‘src’}能保持src以后的目录结构
babel的时候需要安装gulp-babel @babel/core @babel/preset-env
babel({presets: [’@babel/preset-env’]})
src如果是目录和所有子目录下的文件,通配符src/**/*.html
通配所有文件是src/images/**
del([‘dist’])
注意gulp-sass-aaa的话会变成sassAaa驼峰式命名,而且用的时候
const loadPlugins = require(‘gulp-load-plugins’)
const plugins = loadPlugins()
plugins.sass
browser-sync
const browserSync = require('browser-sync')
const bs = browserSync.create()
bs.init({
notify: false,
port: 2080,
// open: false,
// files: 'dist/**',
server: {
baseDir: ['temp', 'src', 'public'],
routes: {
'/node_modules': 'node_modules'
}
}
})
swig会缓存页面,可以把cache设置false
gulp-useref来打包文件,把所有引用注释包括的文件都打包到指定文件里
同时读写同一个文件夹可能会导致文件写入失败,所以build的时候读dist写release
工程中把gulp的常用任务放在package.json的scripts里
老师自己的脚手架工具
yarn global add zce-cli
zce init nm zce-pages
在脚手架的lib/index.js里可以通过
const cwd = process.cwd()获得项目执行目录
try {
config = require(path.join(cwd, '/pages.config.js'))
} catch(e) {}
把gulpfile包在另一个项目里,通过yarn link来导入
yarn gulp build --gulpfile ./node_modules/zce-pages/lib/index.js --cwd .
process.argv获得node执行时的参数
require.resolve(’…’)获得文件,因为这个上一层有package.json,会自动找package里main字段的js
做一个项目包起来gulp cli,这样连gulp都不用接触,就可以完成gulp任务,输入的路径参数都内置
npm publish的时候会把package.json files里的东西带上
如果在国内taobao镜像可能会有同步时间差,可以手动sync,npm.taobao.com
老师封装的 github.com/zce/x-pages
;((window, document) => {
document.querySelector('#btn').addEventListener('click', () => {
alert(Date.now())
})
})(window, document)
小知识点,如果window document这样写,好处一个是可以减少往上层找变量,能加快运行,另一个是uglify的时候会把window和document都压缩
本文为拉勾网大前端高薪训练营第一期笔记