nodejs

Gulp动态监控目录并且格式化输出

如果一个web项目是由许多小的子项目（或者称之为组件）组合起来的，同时每个子项目都有属于自己的js，scss文件，但是当编译的时候（或者开发时）我们需要将子项目的这些资源文件移动到web项目的public目录下面，我们肯定不希望每次都手动copy这些文件，那样实在是太没有效率了。
让我们看一下如下目录结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
project-root
+---biz-module
|   +---404
|   +---auth
|   +---home
|   +---login
|   |   \---template
|   |       \---scss
|   \---user
+---public
|   +---css
|   |   \---login
|   \---modules
|       \---Material
|           +---css
|           +---fonts
|           \---js
\---template
<!-- more -->

在这个工程结构中每个组件模块以目录的封装形式放在biz-module目录下面，这些组件里面包含了自己所有的静态资源，但是对于web项目来说我们通常会把所有的静态资源放到public目录下面。如果手工复制这些资源文件明显不可能，通过配置文件，如果项目足够大配置文件会让人发疯的。幸运的是我们有gulp这个强大的构建工具，让我们可以用程序员的方式来自动构建。

当biz-module目录下面有新添加的组件的时候我们完全不需要为其添加新的配置文件内容，而是通过目录扫描自动将其加载，并且将组件内地静态资源自动移动到项目的public目录中。

下面的示例当中我们会将所有组件中的scss代码编译到项目的public/css目录下，并且根据不同的组件名称创建子目录。这里只是抛砖引玉，你可以用这个机制来分割你的组件，并且保证各个组件之间的完全结构，让项目做到插件化。

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
"use strict";
var gulp = require('gulp');
var jade = require('gulp-jade');
var sass = require('gulp-ruby-sass');
var path = require('path');
var _ = require('lodash');
var fs = require('fs');
function watchBizModuleSCSS(cfg) {
  gulp.task(cfg.name + "-compile-scss", function() {
    return sass(cfg.path)
      .on('error', function(err) {
        console.error('Error!', err.message);
      })
      .pipe(gulp.dest(cfg.dist));
  });
  gulp.task(cfg.name + '-scss', function() {
    gulp.watch('biz-module/' + cfg.name + '/**/*.scss', [cfg.name+'-compile-scss']);
  });
}
// dync watch for biz-module
var bizModules = fs.readdirSync(path.join(__dirname, 'biz-module'));
var _tasks = [];
_.each(bizModules, function(m) {
  var hasSCSS = fs.existsSync(path.join(__dirname, 'biz-module', m, 'template', 'scss'));
  if (hasSCSS) {
    var cfg = {
      name:m,
      path:'biz-module/'+m+"/template/scss/",
      dist:'public/css/'+m
    }
    watchBizModuleSCSS(cfg);
    _tasks.push(m+'-scss');
    console.log("%s---->%j",m,cfg);
  }
});
gulp.task('default', _tasks);
nodejs

使用nodemon让Express server自动重启

在使用Express做快速web开发的时候，当程序文件一变动就需要重启server这个对于一个高效的web程序员来说是非常糟糕的体验，今天发现了一个不错的工具nodemon，当文件变动以后它可以自动重启Express服务器，当然重启Express服务器只是一个很小的功能，它可以做更多的事情，具体的可以访问它的文档。

安装

1
$ npm install -g nodemon

使用

1
2
$ cd to_your_express_project_root_path
$ nodemon bin/www

在默认情况下nodemon只会监控当前操作目录，当然你也可以通过配置来增加，这里就不多做介绍了。