共计 4343 个字符，预计需要花费 11 分钟才能阅读完成。
Github
初始目录设置
在最后将文件进行正当演绎，有助于前期的我的项目打包工作。
├─index.html # HTML 页面
├─src
| ├─static # 动态文件门路
| | └favicon.png
| ├─js # JavaScript 文件门路
| | └main.js
| ├─css # CSS 文件门路
| | └style.css我的项目运行同步预览
应用原生开发页面有一个问题，就是在测试的时候你得一直去刷新页面，而不会实时监听你的文件改变而进行刷新同步。
当然咱们能够应用 VSCODE 去进行开发，应用 live server 插件去进行同步预览。
但不是每个人都是用 VSCODE 进行我的项目开发的，因而咱们还是应用 node 去实现我的项目的同步预览。
// 初始化 Node
yarn
// 装置 browser-sync
yarn add browser-sync这里我应用browser-sync，更多的应用办法能够去官网查看，这里就不多说了。
装置实现后，关上命令行工作，执行以下命令。
// 进入我的项目门路
cd nativeTemplate
// 履行 browsersync(监听 html、css、js 文件)
browser-sync start --server --files "*.html, src/css/*.css, src/js/*.js"但每次开始我的项目都得去执行命令就会比拟麻烦，咱们能够将其配置到 package.json 中。
{
"scripts": {"serve": "browser-sync start --server --files \"*.html, src/css/*.css, src/js/*.js\""}
}这样子咱们当前只须要执行 yarn serve 就能够运行我的项目了。
配置跨域
当你原生开发而后须要对接接口的时候，配置跨域就是一个挺头疼的事件了。
当然你能够让后端将接口设置 CORS 跨资源共享，达到跨域的目标。
然而咱们也能够应用 http-server 来实现跨域配置。
// 装置 http-server
yarn add http-server具体的应用操作我也不多说了，能够去看一下文档阐明。这里就只讲讲咱们跨域要用到的操作。
咱们先执行上面的命令，开启本地 8888 端口，而后重定向到咱们的 API 接口。
http-server -p 8888 --cors -P https://jsonplaceholder.typicode.com当然你仍旧能够配置到 package.json 里，而后执行 yarn http-server 进行启动。
{
"scripts": {"http-server": "http-server -p 8888 --cors -P https://jsonplaceholder.typicode.com"}
}而后这时候，咱们就能够在 main.js 进行申请接口了。
const baseApi = 'http://localhost:8888';
// 申请数据（跨域申请）function request() {fetch(baseApi + '/posts')
.then(response => response.json())
.then(data => console.log(`Request success!`, data))
}
request();当然这个只能用于前端调试用，当我的项目实现后，咱们可将 baseApi 改为/api, 而后让后端应用nginx 去重定向既可。
我的项目打包
按理而言，应用原生开发是能够不须要打包我的项目的，间接部署就能够的。
但在理论开发中，还是须要进行我的项目的打包，一是将文件持续压缩，二是将动态文件进行重命名解决，避免缓存问题。
这里咱们应用 gulp 来实现我的项目打包的自动化解决。
// 装置
yarn gulp gulp-cssmin gulp-htmlmin gulp-rev gulp-rev-collector gulp-uglify del这里的 gulp-cssmin、gulp-htmlmin、gulp-uglify 是用于压缩 css、html、js 文件；gulp-rev、 gulp-rev-collector、del是用于重命名动态文件解决的。
装置实现后，在根门路新建一个 gulpfile.js 文件，先把装置的货色引入。
const gulp = require('gulp');
const rev = require('gulp-rev');
const del = require('del');
const revCollector = require('gulp-rev-collector');
const uglify = require('gulp-uglify');
const htmlMin = require('gulp-htmlmin');
const cssMin = require('gulp-cssmin');而后咱们先来实现 css 的压缩和重命名。
gulp.task('rev:css', () => {return gulp.src('src/css/*.css')
.pipe(rev()) // 将所有匹配到的文件名全副生成相应的版本号
.pipe(cssMin()) // 压缩 CSS
.pipe(gulp.dest('dist/assets')) // 将压缩好的新 css 文件保留到 dist/assets 门路下
.pipe(rev.manifest()) // 把所有生成的带版本号的文件名保留到 rev-manifest.json 文件中
.pipe(gulp.dest('rev/css')) // 把 rev-manifest.json 文件保留到指定的门路
})而后执行 gulp rev:css 命令后，门路下会多出了 dist 和rev文件夹，dist/assets门路下会有打包好的 css 文件，而在 rev/css 下会有一个 rev-manifast.json 文件，外面寄存着文件名的映射表，用于前面更换 index.html 里的文件引入。
同理的咱们也能够实现对 JavaScript 和其余动态文件的压缩和重命名解决。
gulp.task('rev:js', () => {return gulp.src('src/js/*.js')
.pipe(rev())
.pipe(uglify()) // 压缩 JS
.pipe(gulp.dest('dist/assets'))
.pipe(rev.manifest())
.pipe(gulp.dest('rev/js'))
})
gulp.task('rev:static', () => {return gulp.src('src/static/**')
.pipe(rev())
.pipe(gulp.dest('dist/assets'))
.pipe(rev.manifest())
.pipe(gulp.dest('rev/static'))
})而后顺次执行 gulp rev:js 和gulp rev:static。
之后咱们须要对 index.html 外面的引入进行替换。
gulp.task('rev-collector', () => {return gulp.src(['rev/**/*.json', './*.html'])
.pipe(revCollector({
dirReplacements: { // 对引入门路进行重置
'src/css': 'assets',
'src/js': 'assets',
'src/static': 'assets'
},
replaceReved: true
}))
.pipe(htmlMin({ // 压缩 HTML
collapseWhitespace:true,
collapseBooleanAttributes:true,
removeComments:true,
removeEmptyAttributes:true,
removeScriptTypeAttributes:true,
removeStyleLinkTypeAttributes:true,
minifyJS:true,
minifyCSS:true
}))
.pipe(gulp.dest('dist'))
})执行 gulp rev-collector 后，既可在 dist 门路下看到新生成的 index.html 文件，此时咱们我的项目打包的根底工作就做好了。
但如果咱们前面还须要批改文件后再进行我的项目打包时，咱们须要事先清理 dist 文件下的所有文件，不然的话就会累积着上次的文件，而不会被迭代掉。并且，对于 rev 文件夹也是如此，当我的项目打包完结后，该文件夹也没有任何作用了，也能够进行删除解决。
因而咱们须要进行一个清理文件的工作。
// 删除文件
gulp.task('clean:init', (cb) => {return del(['dist/*', 'rev/*'], cb)
})
gulp.task('clean:rev', (cb) => {return del(['rev'], cb)
})这时候，咱们在 gulpfile.js 中设置了 6 个自动化工作，并且每次都须要依照肯定的程序去执行工作，因而咱们能够将所有工作进行一个整合。
gulp.task('build', gulp.series(
'clean:init',
gulp.parallel('rev:js', 'rev:css', 'rev:static'),
'rev-collector',
'clean:rev'
))当初咱们能够执行 gulp build 实现全副打包动作。
简略说一下自动化工作流程：
- 首先执行
clean:init，将本来的dist和rev文件清空删除。 - 其次同步执行
rev:js、rev:css、rev:static，对全副动态文件进行压缩和重命名解决。 - 接着执行
rev-collector，对index.html进行文件引入的更换。 - 最初执行
clean:rev，将rev文件夹删除。
同样，咱们也能够将其配置到 package.json 中。
{
"scripts": {"build": "gulp build"}
}而后执行 yarn build 既可进行我的项目打包。
我的项目目录阐明
├─index.html # HTML 页面
├─src
| ├─static # 动态文件门路
| | └favicon.png
| ├─js # JavaScript 文件门路
| | └main.js
| ├─css # CSS 文件门路
| | └style.css
├─dist # 打包文件门路
| ├─index.html
| ├─assets
| | ├─favicon-a35b664aff.png
| | ├─main-ce0b6aa357.js
| | └style-118e221845.css
├─gulpfile.js # gulp 配置文件
├─README.md # 阐明文档
├─package.json # node 配置文件