Github

初始目录设置

在最后将文件进行正当演绎，有助于前期的我的项目打包工作。

├─index.html                    # HTML页面├─src                           |  ├─static                     # 动态文件门路|  |   └favicon.png|  ├─js                         # JavaScript文件门路|  | └main.js|  ├─css                        # CSS文件门路|  |  └style.css

我的项目运行同步预览

应用原生开发页面有一个问题，就是在测试的时候你得一直去刷新页面，而不会实时监听你的文件改变而进行刷新同步。

当然咱们能够应用VSCODE去进行开发，应用live server插件去进行同步预览。

但不是每个人都是用VSCODE进行我的项目开发的，因而咱们还是应用node去实现我的项目的同步预览。

// 初始化Nodeyarn// 装置browser-syncyarn 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-serveryarn 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配置文件