使用 Gulp 构建 AngularJS / Jade 项目

jopen 6年前

 

我所经历的大部分项目,并不是纯粹的前端项目,相关的前端文件,都是使用 Express 来处理,除了 Jade 文件之外的,全部放在 Express 静态文件目录public中,Bower 也配置为将依赖包直接安装到public/lib目录,然后直接使用原路径在 HTML 中引用对应的 JavaScript / CSS 文件,经常是一个页面加载几十个静态资源。

上周在做一个 App 项目的商户端,对应的 API 已经完成,只是用 AngularJS 来实现一个前端 Web 页面,其中的 HTML 使用了 Jade 来完成。由于是一个完全的前端项目,终于决定尝试用 Gulp 来进行构建。整体的需求如下:

  • 使用 Bower 管理前端依赖
  • 需要将 Jade 文件编码成 HTML,并按照 Angular New Router 中的 Components 来组织目录结构
  • 将 CSS / JavaScript 文件组装为单个文件
  • 图片和字体等静态资源存放到对应目录
  • 使用 Gulp 创建一个调试用的服务器,并能够修改文件后自动重载浏览器页面

项目的目录与文件结构

整体文件夹结构如下:

├── app  │   ├── controllers // AngularJS 控制器  │   │   └── home.js  │   ├── modules // AngularJS 模块  │   │   └── app.js  │   ├── services // AngularJS 服务  │   │   └── city.client.service.js  │   └── views // Jade 文件  │       ├── index.jade  │       └── _partial  │           └── home.jade  ├── bower.json  ├── config.js  ├── gulpfile.js  ├── package.json  ├── README.md  └── static      ├── css      │   └── style.css      └── images          ├── avatar.png          └── logo.gif

另外还有个public目录,作为发布目录,提供给 Web 服务器对外发布。所有需要在浏览器使用的文件,最后使用都要生成或者复制到public中。

使用 Bower 管理前端依赖

悲剧,在我定这篇文章的大纲的时候, Bower 还在更新,结果没两天就宣布不再开发了。

Bower 之所以在以前统治着前端包管理领域,原因在于它的扁平化包管理, NPM 中每个模块都有独立的属于各自的目录,来存储对应的依赖包,虽然会占用比较多的磁盘,但却可以防止模块版本不同而造成的依赖问题。 Bower 本身并不直接决定应用的包依赖,它将模块的依赖同模块本身一样安装。

自从 NPM 成立专门的公司来运营以后,已经致力于将自己从Node Package Manager提升为JavaScript Package Manager。所以也开始像 Bower 来组织模块的依赖—— Bower 存在的理由又少了一个。

这两天,网上正在嘲笑bower --save并不会把当前已经安装的依赖存储到bower.json,不过我怀疑他们没有看到过 NPM 3.3.x 是怎么处理依赖的,npm --save后的package.json估计会相当的不堪入目吧。

Jade 模板文件转换为 HTML 文件

以前 Jade 文件是使用 Express 的view engine来转译,在专门的路由文件中,一一按照 Angular New Router 的 Components 标准来进行解析。使用 Gulp 转换也是类似,借助gulp-jade模块,设置gulp.src为 jade 文件路径,gulp.dest为转换后的 HTML 文件路径,为了方便,将需要转换的 jade 文件和对应的路径组成一个数组,再在gulp.task中对数据进行遍历,并执行转换。

var gulp = require('gulp');  var jade = require('gulp-jade');    var jadeFiles = [    {src: './app/views/index.jade', dest: './public/'},    {src: './app/views/_partial/home.jade', dest: './public/components/home/'}  ];    gulp.task('jade', function(){    jadeFiles.forEach(function(jf){      if(!jf.src || !jf.dest) return;      gulp.src(jf.src)        .pipe(jade({petty: true}))        .pipe(gulp.dest(jf.dest));    });  });

将 JavaScript / CSS 文件组装为单个文件

对于遵循 AngularJS 模块化设计的前端应用, JavaScript 文件那必然是相当多,再加上使用一些扩展,就算是中小型项目,超过 70 个以上那也是相当常见,看 Chrome 开发工具中的 Network 页那可以部是相当精彩,

如果只是将多个 JavaScript 和 CSS 文件合为一个,使用gulp-concat模块即可,压缩 JavaScript 文件,可以再加一个gulp-uglify模块,压缩 CSS 文件,可以使用gulp-minify-css模块。gulp.src支持使用数组的方式来指定要处理的文件列表。

var gulp = require('gulp');  var concat = require('gulp-concat');  var uglify = require('gulp-uglify');  var minifyCss = require('gulp-minify-css');  var jsFiles = [      './bower_components/jquery/dist/jquery.js',       './bower_components/bootstrap/dist/js/bootstrap.min.js',       ',/bower_components/PACE/pace.min.js',       './bower_components/angular/angular.js',       './bower_components/angular-new-router/dist/router.es5.js',       './bower_components/at-table/dist/angular-table.js',       './app/modules/businessApp.js',       './app/controllers/home.js'  ];  var cssFiles = [      './bower_components/bootstrap/dist/css/bootstrap.min.css',       './bower_components/font-awesome/css/font-awesome.min.css',       './bower_components/PACE/themes/blue/pace-theme-loading-bar.css',       './static/css/start.css'  ];  // 在这两个 `min` 任务之外,还有两个不带 `min` 的任务,区别在于不对文件压缩  gulp.task('scripts_min', function(){    return gulp.src(jsFiles)      .pipe(concat('all.js')) // 合并 JavaScript ,并设置合并后的文件名      .pipe(uglify()) // 执行 JavaScript 压缩      .pipe(gulp.dest('./public/js'));  });  gulp.task('stylesheets_min', function(){    return gulp.src(cssFiles)      .pipe(concat('all.css')) // 合并 CSS ,并设置合并后的文件名      .pipe(minifyCss()) // 执行 CSS 压缩      .pipe(gulp.dest('./public/stylesheet'));  });

管理图片字体等静态资源

对于图片、字体等文件,只是需要使用 Gulp 自带的gulp.src和gulp.dest来复制到 Web 目录即可。除了这些静态文件,有些文件可能也需要单独处理,比如 JavaScript 中的一些配置项文件,另外,如果使用加载状态提示模块,这个也是需要优秀加载的。顺便安利一下 PACE ,它是个使用相当方便的加载提示模块。

gulp.task('pace', function(){    // copy pace.js to js folder    return gulp.src('./bower_components/PACE/pace.min.js')      .pipe(gulp.dest('./public/js'));  });

其它需要直接复制的文件,也都是类似方法处理。

使用 Gulp 来创建文件修改后浏览器自动刷新的 Web 服务器

如果想要文件修改后,浏览器自动刷新,需要做两方面的工作:

  • 监控 JavaScript / Jade / CSS 文件,修改后重新转换或者压缩
  • 监控 JavaScript / Jade / CSS 文件,修改后刷新浏览器

对于第一个,使用gulp-watch模块来监视文件,并执行对应的 Task ,对于第二个,可以使用gulp-webserver模块,它可以创建一个 Web 服务器,并且在浏览器和服务器之间创建 Socket.IO 长链接,一旦有文件修改,便通过长链接通知浏览器刷新页面。

var gulp = require('gulp');  var webserver = require('gulp-webserver');    gulp.task('watch', function(){    // 不同的文件个性,需要执行不同的任务来处理    gulp.watch(['app/views/*', 'app/views/_partial/*'], ['jade']);    gulp.watch(['bower_components/*'], ['scripts', 'stylesheets']);    gulp.watch(['static/css/*'], ['stylesheets']);    gulp.watch(['app/controllers/*', 'app/modules/*', 'app/services/*'], ['scripts']);  });    gulp.task('webserver', function(){    gulp.src('./public/')      .pipe(webserver({        host: '0.0.0.0',        livereload: true,        fallback: 'index.html'      }));  });