angular 系列三 gulp 代码构建工具简介
为什么要把 gulp 的学习文章安装到这里,因为我们上一篇说到了创建一个angular.js项目框架,其中用 gulp 来构建代码.
什么是 gulp ,我之前的博客介绍过 yoman项目构建工具 ,gulp 也是类似这样的工具,而且感觉比 yoman和 grunt等工具使用更加简单方便.
我们在项目中使用 gulp 做什么?
我们会用 gulp 定制几个任务,其中一个就是把controller中的控制器代码抽取出来,然后生成一个新的 app.js .
这样的好处是不言而喻的,比如一个团队每个人负责几个控制器,如果我们不用项目管理工具来自动合并引用到文件的话,我们只能手动每个人去修改 index.html ,势必会造成这个文件代码冲突.
而且有了gulp 后,以后的每个工程师只要专注你的controller逻辑实现即可.下面我们会举例说明.
另外一个使用场所是js,css等文件的压缩,在部署生产环境的时候,我们需要把一些静态资源压缩,节省带宽,而且可以起到一定的混淆代码作用.
还有就是帮我们启动 node.js 服务器
gulp 的安装
gulp 需要全局安装,在我们的开发项目再安装一份
npm install -g gulp npm install --save-dev gulp
典型gulp 配置文件是这样的
var gulp = require('gulp');
gulp.task(‘task任务名', function () {
//任务函数
});task方法有两个参数，第一个是任务名，第二个是任务函数.
gulp 有许多依赖的插件,俗称 gulp 外挂:
编译Sass (gulp-ruby-sass)
Autoprefixer (gulp-autoprefixer)
缩小化 (minify)CSS (gulp-minify-css)
JSHint (gulp-jshint)
拼接 (gulp-concat)
丑化 (Uglify) (gulp-uglify)
图片压缩 (gulp-imagemin)
即时重整 (LiveReload) (gulp-livereload)
清理档案 (gulp-clean)
图片快取，只有更改过得图片会进行压缩 (gulp-cache)
更动通知 (gulp-notify)
通过npm 安装外挂.
$ npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-clean gulp-notify gulp-rename gulp-livereload gulp-cache --save-dev
用到的就安装,用不到的可以不安装.
gulp 相关的常用函数:
1.gulp.src(参数,处理函数)
参数是要参数数据流的处理文件,可以是'
/app/index.js 指定的一个文件
/app/*.js 某个文件夹下的所有文件
/app/**/*.jsapp 目录下及其所有子目录下的所有js文件
!app/main.js 除app目录下main.js以外的所有js文件
*.+(js|css); 匹配根目录下扩展名是 js 和 css 的所有文件.
[‘app/index.js’,’script/*.js’]可以是一个数组,每个元素表示一个文件或者文件夹下所有文件.
2.gulp.task(任务吗,处理函数)
创建任务的方法,第一个是任务名,第二个任务处理函数.
3.gulp.watch(文件路径,处理函数)
可以让gulp指定去监视一个文件或者多个文件,当文件发生变化时,执行处理函数.
4.gulpLoadPlugins
这是一个 gulp 插件,如果不适用它的时候,加载每一个外挂都像node.js require一个包一样,一一定义,这样比较麻烦.
而使用 gulpLoadPlugins 插件,它可以自动去 package.json中查找所有的gulp 外挂,并且一一自动加载进来,非常方便.
比如我们不使用 gulpLoadPlugins 时:
var gulp = require("gulp");
var concat = require("gulp-concat");
var uglify = require('gulp-uglify');
var cssmin = require('gulp-cssmin');
var wrap = require("gulp-wrap");
var expressService = require('gulp-express-service’);如果我们使用 gulpLoadPlugins 时:
var gulp = require('gulp'),
gulpLoadPlugins = require('gulp-load-plugins'),
plugins = gulpLoadPlugins();这样看起来就简单多了,只要调用 gulpLoadPlugins() 函数就自动加载了所有外挂.
我们下面来具体看几个 gulp 的任务:
首先定义一些资源
var wwwroot = ‘./Client/';
var paths = {
scripts : ["Client/scripts/main.js", "static/scripts/**/*.js"],
styles : ['Client/styles/main.css', 'static/styles/**/*.css'],
templates: ['Client/templates/**/*.html'],
services: ["app/**/*.js", "portal-service.js", "service.js"]
};gulp.task("scripts", function() {
gulp.src(paths.scripts)
.pipe(wrap('(function(window){\n"use strict"\n<%= contents %>\n})(window);'))
.pipe(concat('app.js'))
.pipe(gulp.dest(wwwroot))
.pipe(uglify())
.pipe(concat('app.min.js'))
.pipe(gulp.dest(wwwroot));
});上面task创建了一个任务,任务名为 script ,
任务处理函数做了如下动作:
gulp.src 函数是要处理的资源,这里我们传递了定义的script 数组,数组里面全部是要处理的脚本文件. 接着下面用到了几次 pipe ,因为gulp 借鉴了Unix操作系统的管道（pipe）思想, 它可以把上一次的结果自动处理为下一次函数的输入参数.
上面的任务执行描述:
加载 paths 对象中 scripts 数组里的指定文件
然后 新建一段文本 wrap('(function(window){\n"use strict"\n<%= contents %>\n})(window);’)
然后将这段文本追加到 新建的文件 app.js 头部,
然后把这个文件保存到 ./Client/ 目录下,
然后用 uglify() 压缩文件,
然后生成另一个新文件 app.min.js
然后把新文件放在 ./Client/ 目录下.
这样整个任务就创建完成了,上面一共生成了2个文件,第一个 app.js 是用于本地调试模式的js合并文件.
第二个 app.min.js 文件是用于生产环境使用的压缩混淆文件.
运行
命令终端定位到代码所在目录,运行 gulp 即可
zhangzhi@moke:~/code/work$ gulp
我们看下 finder 目录
gulp 任务帮我们生成了一个 开发版 app.js 和一个生成压缩版 app.min.js 文件.