股票场内基金交易，没时间盯盘？
前段时间跟着学习小组进行了 gulp 的学习，对 gulp 算是有了个初步的，空洞的了解。最近两周，一直在进行前端代码编写，很多工程化的需求逐渐出现，于是开始实践 gulp，试图形成一个稳定的工作流程。
可以在 https://github.com/YanisJ/ife-mission-starter 查看到项目完整结构和内容。
由于我很可能会对项目进行修改，如果遇到文章中内容与项目内容冲突，以项目为准。我也会经常更新文章。
浏览器自动刷新
Live reloading 绝对是一个刚性需求，自然就成为了我第一个需要解决的问题。在 ng2 的学习中，接触到了 lite-server：一个简易服务器，不需任何配置，提供 browser-sync 的功能。由于它实在是简单易用，成为了我的第一个选择。
于是我对 package.json 进行了简单的修改：
|
1 2 3 4 5 6 7 |
"devDependencies":{ "lite-server":"^2.1.0" }, "scripts":{ "start": "lite-server" } |
安装：
|
1 2 |
npm install |
启动：
|
1 2 |
npm start |
这样，就有了一个具备自动刷新功能的工作环境。
开始使用 gulp
很快，我碰到了第二个需求，我的代码需要有在线 demo，最好能将 CSS，JavaScript 代码进行一些处理。其实，demo 里的这些代码量有限，处不处理意义不大，但这里存在一个相关的问题：图片。Demo 虽然小，但图片总是有的，压缩对于图片来说意义就大多了。
经过一番查阅，我在 gulp 插件搜索页面 找到了几个需要用到的插件：
- gulp-clean-css： 压缩 CSS 文件；
- gulp-imagemin： 压缩图片；
- del： 在开始任务前将已有的压缩文件删除掉。
这里没有关于 JavaScript 的任何插件，因为按我目前的实际情况来说，压缩 JavaScript 代码不是一个好主意。插件确定了，开始修改 package.json：
|
1 2 3 4 5 6 7 8 9 10 11 |
"devDependencies":{ "lite-server":"^2.1.0", "gulp":"^3.9.1", "gulp-clean-css":"^2.0.3", "gulp-imagemin":"^2.4.0", "del":"^2.2.0" }, "scripts":{ "start": "lite-server" } |
然后，创建了 gulpfile.js：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
var gulp = require('gulp'); var cleanCSS = require('gulp-clean-css'); var imagemin = require('gulp-imagemin'); var del = require('del'); // 管理路径 var src_dir = 'src', dst_dir = 'dist'; var paths = { html: src_dir + '*/*.html', css: src_dir + '*/*.css', js: src_dir + '*/*.js', images: src_dir + '*/img/**/*' }; // 删除上一次压缩 gulp.task('clean', function () { return del(dst_dir); }); // 处理 HTML：直接拷贝到输出文件夹 gulp.task('html', ['clean'], function () { return gulp.src(paths.html) .pipe(gulp.dest(dst_dir)); }); // 处理 CSS gulp.task('css', ['clean'], function () { return gulp.src(paths.css) .pipe(cleanCSS()) // 压缩 CSS .pipe(gulp.dest(dst_dir)); }); // 处理 JavaScript：直接拷贝到输出文件夹 gulp.task('js', ['clean'], function () { return gulp.src(paths.js) .pipe(gulp.dest(dst_dir)); }); // 处理图片 gulp.task('images', ['clean'], function () { return gulp.src(paths.images) .pipe(imagemin({optimizationLevel: 5})) // 压缩图片 .pipe(gulp.dest(dst_dir)); }); gulp.task('default', [ 'html', 'css', 'js', 'images']); |
这里不对代码进行细致解释，有疑问可以参看 奇迹 Blog 中 gulp 相关文章。
完成 gulpfile.js 编写后，在命令行中键入 gulp，即可在输出目录中生成已压缩完成的代码，算是完成了项目中 gulp 的基本搭建。
|
1 2 |
gulp |
图片缓存
在使用 gulp 压缩几次过后，出现了新问题。代码压缩需要的时间很短，但图片压缩用时很长。每次使用 gulp，都会重新把所有图片压缩一遍，图片越来越多，需要的时间越来越长，而且绝大部分工作都是重复的。于是又开始了新一轮的查阅，最后找到了这个：
- gulp-cache：在压缩图片处理中使用，当图片发生变化时才进行压缩。
只需要对 gulpfile.js 进行小小的修改：
|
1 2 3 4 5 6 7 8 |
var cache = require('gulp-cache'); gulp.task('images', ['clean'], function () { return gulp.src(paths.images) .pipe(cache(imagemin({optimizationLevel: 5}))) // 这里使用 cache .pipe(gulp.dest(dst_dir)); }); |
这样已经存在的图片不会再被反复压缩，大大缩短 gulp 执行时间。
JSHint
随着项目的进行，我发现 JSHint 是个不错的工具，能对 JavaScript 代码进行一些检查，提高代码质量。最开始，我把 JSHint 放在 ‘js’ 任务中，随后意识到，一般只有代码基本完成后，我才需要压缩它，而在编写代码过程中，JSHint 就能发挥作用。于是添加了一个 task：
|
1 2 3 4 5 6 7 8 |
var hint = require('gulp-jshint'); gulp.task('hint', function () { return gulp.src(paths.js) .pipe(jshint()) .pipe(jshint.reporter('default')); }); |
平时在命令行中，使用以下命令来进行代码检查：
|
1 2 |
gulp hint |
每次自己手动敲命令检查代码实在有些傻，于是引入了插件 gulp-watch：
- gulp-watch： 监控文件变化。
将 ‘hint’ 任务改为：
|
1 2 3 4 5 6 7 8 9 |
var watch = require('gulp-watch'); gulp.task('hint', function () { return gulp.src(paths.js) .pipe(watch(paths.js)) .pipe(jshint()) .pipe(jshint.reporter('default')); }); |
当执行 gulp hint 后，命令行将挂起一个服务，每当 JavaScript 文件的修改被保存，就能自动检查代码。
浏览器刷新 with gulp
现在，项目中挂着两个服务，一个是 lite-server，用来刷新浏览器，另一个是 gulp hint，用来检查 JavaScript 代码。是时候放弃 lite-server，直接用 gulp 来提供浏览器刷新功能，将两个服务合一。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
var browserSync = require('browser-sync'); gulp.task('browser-sync', function () { browserSync.init({ server: { baseDir: src_dir } }); gulp.watch(paths.js, ['lint']); gulp.watch(src_dir + '/**/*', function(){ browserSync.reload(); }); }); |
至此，使用 gulp 构建了一个具备压缩、检查、刷新浏览器功能的工作环境。
想获得去掉 5 元限制的证券账户吗？
如果您想去掉最低交易佣金 5 元限制，使用微信扫描左边小程序二维码，访问微信小程序「优财助手」，点击底部菜单「福利」，阅读文章「通过优财开证券账户无最低交易佣金 5 元限制」，按照文章步骤操作即可获得免 5 元证券账户，股票基金交易手续费率万 2.5。
请注意，一定要按照文章描述严格操作，如错误开户是无法获得免 5 元证券账户的。