簡(jiǎn)答題
1锋恬、談?wù)勀銓?duì)工程化的初步認(rèn)識(shí)为严，結(jié)合你之前遇到過(guò)的問(wèn)題說(shuō)出三個(gè)以上工程化能夠解決問(wèn)題或者帶來(lái)的價(jià)值宫屠。
解答：工程化是指遵循一定的標(biāo)準(zhǔn)和規(guī)范通過(guò)工具去提高效率匪煌，降低成本的一種手段豹爹，一切以提高效率裆悄、降低成本、質(zhì)量保證為目的的手段都屬于工程化臂聋。
工程化主要解決的問(wèn)題：
（1）重復(fù)的機(jī)械工作光稼，比如部署上線前需要手動(dòng)壓縮代碼及資源文件，部署過(guò)程需要手動(dòng)上傳代碼到服務(wù)器孩等。
（2）團(tuán)隊(duì)開發(fā)時(shí)艾君，很難做到風(fēng)格統(tǒng)一，保證質(zhì)量的完成需求開發(fā)
（3）部分功能需要等待后端服務(wù)接口完成以后才可以進(jìn)行開發(fā)
（4）無(wú)法使用模塊化或組件化組織代碼
2肄方、你認(rèn)為腳手架除了為我們創(chuàng)建項(xiàng)目結(jié)構(gòu)冰垄，還有什么更深的意義？
解答：腳手架可以幫我們快速生成項(xiàng)目权她，創(chuàng)建項(xiàng)目基礎(chǔ)結(jié)構(gòu)虹茶。不僅是創(chuàng)建項(xiàng)目基礎(chǔ)結(jié)構(gòu)，更重要的是給開發(fā)者提供一種約束和規(guī)范伴奥，例如：相同的組織結(jié)構(gòu)写烤，相同的代碼開發(fā)范式、相同的模塊依賴拾徙、相同的工具配置洲炊，相同的基礎(chǔ)代碼。更加利于代碼維護(hù)與團(tuán)隊(duì)開發(fā)尼啡。
編程題
1暂衡、概述腳手架實(shí)現(xiàn)的過(guò)程，并使用 NodeJS 完成一個(gè)自定義的小型腳手架工具
工作原理：?jiǎn)⒂脮r(shí)自動(dòng)詢問(wèn)預(yù)設(shè)的問(wèn)題崖瞭，然后將回答的結(jié)果結(jié)合模板文件生成所需要的項(xiàng)目結(jié)構(gòu)狂巢。
- 創(chuàng)建目錄 sjj-scaffolding
- 創(chuàng)建 package.json
npm init
- 在package.json中添加bin字段，指定cli文件的入口文件: "bin":"./cli.js"
- 安裝所需要得依賴
npm install inquirer --save //詢問(wèn)
npm install ejs --save //添加模板引擎
- 創(chuàng)建cli.js文件
#!/usr/bin/env node
const fs = require('fs')
const path = require('path')
const inquirer = require('inquirer')
const ejs = require('ejs')
const { tmpdir } = require('os')
inquirer.prompt([
{
type: 'input',
name: 'name',
message: 'Project name'
}
]).then(answers => {
console.log(answers)
// 根據(jù)用戶的回答的結(jié)果生成文件
// 模板目錄
const templDir = path.join(__dirname, 'templates');
// 目標(biāo)目錄
const destDir = process.cwd();
// 將模板下的文件全部轉(zhuǎn)換到目目錄
fs.readdir(templDir, (err, files) => {
if (err) throw err
files.forEach(file => {
// 通過(guò)模板引擎渲染文件
ejs.renderFile(path.join(templDir, file), answers, (err, result) => {
if (err) throw err
console.log(result)
// 將結(jié)果寫入目標(biāo)目錄文件
fs.writeFileSync(path.join(destDir, file), result)
})
});
})
})
- templates/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= name %></title>
</head>
<body>
</body>
</html>
- npm link 關(guān)聯(lián)到全局變量
npm link
- 執(zhí)行測(cè)試
mkdir test //創(chuàng)建測(cè)試文件夾
cd test //切換文件夾
sjj-scaffolding //執(zhí)行腳手架
2书聚、嘗試使用 Gulp 完成項(xiàng)目的自動(dòng)化構(gòu)建
- 準(zhǔn)備工作
mkdir my-gulp
cd my-gulp
npm init --yes //初始化package文件
- 安裝gulp
npm install gulp --save //安裝gulp模塊
- 創(chuàng)建gulpfile.js文件
// 實(shí)現(xiàn)這個(gè)項(xiàng)目的構(gòu)建任務(wù)
const { src, dest, parallel, series, watch } = require('gulp')
const del = require('del')
const browserSync = require('browser-sync');
const loadPlugins = require('gulp-load-plugins');
const plugins = loadPlugins()// 自動(dòng)加載插件
const bs = browserSync.create()
const data = {
menus: [
{
name: 'Home',
icon: 'aperture',
link: 'index.html'
},
{
name: 'Features',
link: 'features.html'
},
{
name: 'About',
link: 'about.html'
},
{
name: 'Contact',
link: '#',
children: [
{
name: 'Twitter',
link: 'https://twitter.com/w_zce'
},
{
name: 'About',
link: 'https://weibo.com/zceme'
},
{
name: 'divider'
},
{
name: 'About',
link: 'https://github.com/zce'
}
]
}
],
pkg: require('./package.json'),
date: new Date()
}
const clean = () => {
return del(['dist', 'temp'])
}
// 樣式編譯
const style = () => {
return src('src/assets/styles/*.scss', { base: 'src' })
.pipe(plugins.sass({ outputStyle: 'expanded' }))
.pipe(dest('dist'))
}
// 腳本編譯
const script = () => {
return src('src/assets/scripts/*.js', { base: 'src' })
.pipe(plugins.babel({ presets: ['@babel/preset-env'] }))
.pipe(dest('dist'))
}
// 頁(yè)面模板編譯
const page = () => {
return src('src/*.html', { base: 'src' })
.pipe(plugins.swig({ data }))
.pipe(dest('dist'))
}
// 圖片和文字編譯
const image = () => {
return src('src/assets/images/**', { base: 'src' })
.pipe(plugins.imagemin())
.pipe(dest('dist'))
}
const font = () => {
return src('src/assets/fonts/**', { base: 'src' })
.pipe(plugins.imagemin())
.pipe(dest('dist'))
}
// 其他文件以及文件清除
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: ['dist','src','public'],
routes: {
'/node_modules': 'node_modules'
}
}
})
}
const compile = parallel(style, script, page, image, font);
const build = series(clean, parallel(compile, extra))
module.exports = {
clean,
compile,
build,
serve
}
