这篇博客是前面几篇有关前端博客的总结。

包管理器

大约一年前，我写前端还用 Bower 来作为前端的包管理器。

$ bower install what-you-need 将依赖安装到 bower_components 中，（或者通过 .bowerrc 配置安装的路径）。 配合 wiredep ，在 index.html 中 <!-- bower:css --><!-- endbower --> 和 <!-- bower:js --><!-- endbower --> 即可导入所有依赖。

而最近了解了 WebPack 之后，更喜欢 npm + webpack 来作依赖管理。

$ npm install what-you-need
$ npm init    # Create package.json

index.js:

import DepOne from 'scripts/DepOne';

DepOne.what_you_need();

script/DepOne:

import WhatYouNeed from 'what-you-need';

const DepOne = WhatYouNeed();
export default DepOne;

gulp

gulp 是一个自动化构建工具，它最大的特点是基于 “流” 来处理 Task。 挺想对比一下 Grunt 和 gulp，但是对 Grunt 实在没有太深入的了解，带来日有机会再做比较。

slider 上有关于 gulp 的介绍：http://slides.com/contra/gulp 介绍了 gulp 的优点以及流的好处。

gulpfile demo

跟其他自动化构建工具一样，gulp 也有自己的 gulpfile.js 或者 gulpfile.coffee

var gulp = require('gulp');

gulp.task('default', ['clean', 'build']);

gulp.task('build', function() {
  console.log("Building...");
  // do something.
});

gulp.task('clean', function() {
    // Remove dist/
});

执行默认任务 $ gulp 或者执行某一特定任务 $ gulp build

gulp stream

gulp 支持 stream 的方式执行任务，这种方式可以减少 I/O。

通过 gulp.src 取得原始文件。 gulp.src 第一个参数支持 glob 匹配，返回一个 Vinyl files Stream，可以用 pipe 传给下一个插件。 如果需要将结果保存为文件，可以调用 gulp.dest

例如 js uglify：

var coffee = require('gulp-coffee');
var uglify = require('gulp-uglify');

gulp.src('app/scripts/*.coffee')
  .pipe(coffee({bare: true}))
  .pipe(uglify())
  .pipe(gulp.dest('dist/scripts')))

gulp.watch

gulp 提供了 watch 的 API，监控文件变化：

gulp.watch('{./app/scripts/*.coffee,./app/styles/*.styl}', ['build']);

webpack

webpack 是一个模块打包工具。它可以将互相依赖的模块生成一个静态的文件。

它的目的：

  • 将依赖树分割成不同的块，并且能够按需加载。
  • 降低初始化加载时间。
  • 所有静态组件都应该能够成为一个模块。
  • 能够将第三方库作为一个模块导入。
  • 能够自定义模块打包的每一个部分。
  • 能够很好的适应大项目。

webpack Loader

webpack 中将模块导入之前，会根据文件类型调用不同的 loader 进行预处理。 例如需要加载 coffeescript,

// foo.coffee

module.exports = function(message) {
    console.log(message);
}

// bar.coffee
var foo = require('coffee-loader!./foo.coffee');
foo('bar');

loader 的配置还可以写入 webpack.config.js 中

{
    module: {
        loader: [
            { test: /\.coffee$/, loader: 'coffee-loader' },
            { test: /\.styl$/, loader: 'stylus-loader' },
        ]
    }
}

stylus

css 预编译语言很多，见得比较多的估计有 LESS, Sass, scss。

stylus 也是其中一种，喜欢 stylus 的原因：

  • 语法简洁，用缩进表示嵌套关系，这点与 Python 类似。
  • 提供变量、函数
  • 支持 import 语法，可以实现模块化

stylus 语法并不复杂，不做过多的介绍。

Node Foreman

Heroku 提倡用 Procfile 来管理不同的服务，而 foreman 即是一个基于 Procfile 的服务管理工具。

顺带提一下，Ruby 下有 foreman ，Python 下有 honcho。

使用 foreman 之前，需要先配置好 Procfile 和 .env ，实际上即如何启动服务，以及服务的环境变量。

# Procfile
f2e: gulp watch --debug=$DEBUG

# .env
DEBUG=0
PORT=7000
SECRET_KEY="secret-key"

启动服务: $ nf start 即可。

Source

https://github.com/shonenada/f2e-sample