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 文件.



回到顶部