共计 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 配置文件