Jiavan's Blog

bower，web 包管理器

安装npm install -g bower，官方页面http://bower.io

比如利用 bower 安装 jquery 或者 bootstrap，可以使用一下命令:

bower install jquery
bower install bootstrap

会从 bower 包管理器中查找已经在 bower 上注册的要安装的组件，找到以后去 github 上找到最新版本的下载地址，下载的组件将会被保存在目录下的 bower_components 目录下。

也可以用过 github 短语的形式进行安装，比如 jquery 在 github 的地址是 jquery/jquery 下，就能通过下面的方式安装：

bower install jquery/jquery
//注意，bower安装组件的时候，会将组件下载在bower当前命令执行的目录环境下的bower_components目录下

除了用上面的两种方式，bower 还可以通过完整的 github 仓库地址进行安装，如：

bower install https://github.com/jquery/jquery.git

另外 bower 还可以直接通过 url 进行安装：

bower install http://sinaapp.com/jquery/1.7.2/jquery.js

总结：

# installs the project dependencies listed in bower.json
$ bower install
# registered package
$ bower install jquery
# GitHub shorthand
$ bower install desandro/masonry
# Git endpoint
$ bower install git://github.com/user/package.git
# URL
$ bower install http://example.com/script.js

bower 可很方便的安装和管理前端开发的一些框架和组件，但是单独使用 bower 也有局限性，在页面中使用 bower 安装的组件的使用，都需要写上 bower_components 的路径，可以结合 grunt 等工具来解决这个问题。

Yeoman，整合最佳实践和工具，加速和方便开发

安装npm install -g yo，官方页面http://yeoman.io/

安装一个 generator（生成器）：

//之前通过npm安装angular生成器
npm install generator-angular

//通过yoman建立一个angular项目
yo angular testangular

注意，yoman 生成器生成的项目本身是基于 Node 构建的项目。

package.json，dependencies 与 devDependencies

它们都是项目所需要依赖的包，devDependencies 是我们在开发过程中需要依赖的包，dependencies 是项目在生产环境中需要依赖的包。

版本号的约定：

"devDependencies": {
    "grunt": "^0.7.3"
}

尖括号是一个比较宽松的对版本的限制，它只限制主版号，主板本号不变时，npm 会自动安装新的版本。如果是：

"devDependencies": {
    "grunt": "～0.7.3"
}

波浪号是一个严格的版本要求限制，如果第二位版本号改变了 npm 就不会更新。

Gulp，前端构建系统

task

定义 gulp 任务的文件 gulpfile.js，通过 gulp 命令来运行：

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

gulp.task('minify', function () {
  gulp.src('js/app.js').pipe(uglify()).pipe(gulp.dest('build'));
});

//gulp minify

这里定义了一个名为 minify 的任务，为了压缩指定目录文件的 js 代码。task 函数有两个参数，第一个是 task 的名称，第二个是回调函数。

gulp.task('test', function () {
  console.log('this is gulp');
});

task 有可能也是一系列任务，假设要定义一个任务 build 来执行 css、js、imgs 三个任务，我们可以指定一个任务数组而不是函数来完成。

gulp.task('build', ['css', 'js', 'imgs']);

这些任务不是同时进行的，所以不能认为在 js 任务开始的时候 css 任务已经结束了，有可能 css 还没有完成，为了确保一个任务在另一个任务执行前已经结束，可以将函数和任务组结合起来指定其依赖关系。例如，定义一个 css 任务，在执行前需要检查 greet 任务是否已经执行完毕，可以像下面这样写：

gulp.task('css', ['greet'], function () {
  //deal
});

这样在执行 css 任务时，gulp 会先执行 greet 任务，然后再它结束后执行 css 回调。

default task

可以定义一个在 gulp 开始运行的时候默认执行的任务，并将这个任务命名为 default。

gulp.task('default', function () {
  //your default task
});

src

gulp.src()函数用字符串匹配一个文件或者一个文件编号，称为 glob，然后创建一个对象流来代表这些文件。src 方法输入一个 glob（匹配一个或者多个文件）或者 glob 数组，然后返回一个可以传递给插件的数据流。

gulp.src(['js/*/*.js', '!js/*/*.min.js']);
//匹配js目录下没有被压缩的文件

plugins

gulp 拥有许多的插件，而且调用方法也相同（通过传递文件对象流），它们通常会对这些文件进行修改，然后返回新的文件对象流给下一个插件。

常用的一些插件如 jshint，uglify，concat（将所有文件合合并到一个文件）。

gulp-load-plugins

gulp-load-plugins 模块能自动的从 package.json 中加载任意 gulp 插件然后把他们附加到一个对象上：

var gulpLoadPlugins = require('gulp-load-plugins');
var plugins = gulpLoadPlugins();

gulp.task('js', function () {
  return gulp
    .src('js/*.js')
    .pipe(plugins.uglify())
    .pipe(concat('app.js'))
    .pipe(gulp.dest('build'));
});

在执行上面的代码后，插件对象就已经包含了插件，package.json 文件如下：

{
    "devDependencies": {
        "gulp-concat": "~2.2.0",
        "gulp-uglify": "~0.2.1",
        "gulp-jshint": "~1.5.1",
        "gulp": "~3.5.6"
    }
}

后续发布的 gulp-load-plugins 还提供了延迟加载功能，提高了插件的性能，只有在执行任务的时候才会加载所用的插件，其它部相关的插件不会被加载。

watching files

gulp 可以监听文件的修改动态，文件在被改动的时候执行一个或多个任务。这个功能十分方便。你可以修改 less 文件，gulp 会自动的转换为 css 文件并更新浏览器。

使用 gulp 中的 watch 方法可以监听文件，它接受一个 glob 或者 glob 数组和 src 一样，以及一个任务组来执行回调。

gulp 实践

首先安装 gulp 及其依赖：

npm install --save-dev gulp
npm install --save-dev gulp-concat
npm install --save-dev gulp-uglify
npm install --save-dev gulp-rename

在项目目录下新建 gulpfile.js 文件并输入以下内容：

var gulpLloadPlugins = require('gulp-load-plugins');
var gulp = require('gulp');
var plugins = gulpLloadPlugins();

gulp.task('default', ['js']);

gulp.task('js', function () {
  gulp
    .src('js/*.js')
    .pipe(plugins.concat('app.js'))
    .pipe(gulp.dest('dist/js'))
    .pipe(plugins.uglify())
    .pipe(plugins.rename('app.min.js'))
    .pipe(gulp.dest('dist/js/'));
});

gulp.task('watcher', function () {
  gulp.watch('js/*.js', ['js']);
});

在命令行中输入gulp js，就会启动 js 任务，首先找到 js 目录下的所有 js 文件，然后合并为 app.js 文件输出到 dest/js 目录下然后进行 js 代码压缩、重命名最后输出到 dist/js 目录下。

watcher 任务可以监视 js 目录下的所有 js 文件，当文件发生了改变时会调用 js 任务重复上面的步骤。

思考

gulp 相比于 grunt 来说是要简单了很多，没有这么繁琐的配置步骤，文件对象流实现，效率更高。与学弟也有一些探讨，包括 yoeman/bower 的使用，类似与 yoeman 这种东西用构建器可以快速的完成一个如 angular 项目的构建，但是个人觉得并不是很好用，到底怎么样还是仁者见仁智者见智吧，不过 bower 还是挺好用的。

参考文章 0. http://www.w3ctech.com/topic/134