StuQ Koa在线课程

更多实践

gulp

如果我们的框架里没有gulp,会显得有点low,那我们也使用gulp作为构建工具吧

一般作用

  • 构建,打包
  • watch

先实现一个简单的watch吧

npm i -g gulp
npm i -S gulp
npm i -S gulp-watch
npm i -S gulp-mocha

create gulpfile.js

touch gulpfile.js

in gulpfile.js

var gulp = require('gulp');
var watch = require('gulp-watch');
var mocha = require('gulp-mocha');

var source_path = ['test/**/*.js', 'lib/*.js'];

gulp.task('watch', function() {
  gulp.watch(source_path, ['mocha']);
});

gulp.task('mocha', function () {
    return gulp.src(source_path , {read: false})
        // gulp-mocha needs filepaths so you can't have any plugins before it 
        .pipe(mocha({reporter: 'spec'}));
});

测试

执行一次测试

gulp mocha

如果source_path目录下的文件变动,会触发一次测试(作业依赖)

gulp watch

增加默认gulp命令

gulp.task('default',['mocha', 'watch']);

rails里的rake routes挺爽,不妨实现一些

var mount = require('mount-routes');

gulp.task('routes', function() {
  var express       = require('express');
  var app           = express();

  // mount routes
  mount(app, __dirname + '/app/routes', true);
});

于是

gulp routes

效果基本一样,有木有?

更多之前曾在Stuq微课堂里分享过【Gulp实战和原理解析(以weui作为项目实例)】

http://i5ting.github.io/stuq-gulp/

还有一篇更基础的教程

https://github.com/streakq/js-tools-best-practice/blob/master/doc/Gulp.md

browser-sync

代码变动,浏览器也可以不刷新的

  • browser-sync
gulp.task('less_server',['build_less'] ,function () {
    browserSync.init({
      proxy: "127.0.0.1:3005"
    })
    gulp.watch('./public/css/main.less', ['build_less']);
    gulp.watch('./public/*.html',function () {
      browserSync.reload();
    });
});

具体参见【Gulp实战和原理解析(以weui作为项目实例)】

http://i5ting.github.io/stuq-gulp/

open

都是mac闹的,人都变懒了

var express  = require('express');
var app      = express();
var path     = require('path');
var open     = require("open");

app.get('/', function (req, res) {
  res.send('Hello World')
})

// 随机端口3000 - 10000 之间
app.listen(4001)

open("http://127.0.0.1:4001");