股票场内基金交易,没时间盯盘?
前段时间跟着学习小组进行了 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 元证券账户的。