乐趣区

关于javascript:前端原生开发的一些自动化处理

jiezi

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 配置文件
退出移动版