Gulp构建Angularjs应用

使用Gulp构建Angularjs应用的缘由

2016在前端已经大热的今年也决定跟上时代的步伐进入前端自动化的行列，刚好公司框架采用的是angularjs，css采用的是scss预编译语言，所谓做事三思而后行：可不可以不做？可不可以明天做？可不可以给别人做？因此在众多自动化工具中选择了gulp，其中还有看重他的轻量级和众多的插件的原因。

初始化Gulp

首先需要安装node，然后生成package.json：npm init。
安装gulp：npm install gulp --save-dev 将gulp的包依赖加入到package.json中。
然后再是gulp的插件：
gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename。

gulpfile.js:var gulp = require('gulp');
//引入gulp组件
//js语法检查
var jshint = require('gulp-jshint');
//sass预处理
var sass = require('gulp-sass');
//文件合并
var concat = require('gulp-concat');
//js压缩
var uglify = require('gulp-uglify');
//重命名
var rename = require('gulp-rename');

目录结构划分

然后是我们的目录结构划分，之前是想按照项目模块来划分，就好比登陆的模块就是login的文件夹下面是他的html文件和css文件。但之后考虑到因为是三级分销加商城的系统项目模块比较多还是选择按功能来划分如下图：

gulpfile任务配置

先添加gulp的相关依赖：

var gulp = require('gulp');
//引入gulp组件
//js语法检查
var jshint = require('gulp-jshint');
//sass预处理
var sass = require('gulp-sass');
//文件合并
var concat = require('gulp-concat');
//js压缩
var uglify = require('gulp-uglify');
//重命名
var rename = require('gulp-rename');
//server服务
browserSync = require('browser-sync').create();

值得注意的是 browserSync 号称前端页面调试神器：
Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。

因为是angularjs项目当然需要angularjs的包和ui-router的路由（ui-router对于路由的处理相对于ng-router还是强大太多，不过也看个人习惯是使用ui-router还是ng-router），项目中因为npm现在的包管理也还不错所以我也就没使用bower，这个也是看个人习惯吧。这里手动加入项目依赖的两个包，然后创建任务做代码的合并和压缩处理。

var jsFiles = ['./node_modules/angular/angular.js','./node_modules/angular-ui-router/release/angular-ui-router.js'
];//合并、压缩来自npm的js资源文件
gulp.task('npmscripts', function() {return gulp.src(jsFiles).pipe(concat('npm.js')).pipe(gulp.dest('./dist/js')).pipe(rename('npm.min.js')).pipe(uglify()).pipe(gulp.dest('./dist/js'));
})

下面则是对于生产环境编写的js和css的处理：

//检查脚本
gulp.task('lint', function() {gulp.src('./app/**/*.js').pipe(jshint()).pipe(jshint.reporter('default'));})//编译Sass
gulp.task('sass', function() {console.log('sass!');gulp.src('./app/style/*.scss').pipe(sass()).pipe(gulp.dest('./app/style'));gulp.src('./app/style/*.css').pipe(concat('style.css')).pipe(gulp.dest('./dist/css'))
})//合并、压缩js文件
gulp.task('scripts', function() {gulp.src('./app/**/*.js').pipe(concat('all.js')).pipe(gulp.dest('./dist/js')).pipe(rename('all.min.js')).pipe(uglify()).pipe(gulp.dest('./dist/js'));
});

启动browserSync服务

//使用connect启动一个Web服务器
gulp.task('browserSync', function () {browserSync.init({server: {baseDir: "./app/"}});
});

配置gulp默认任务

//默认任务
gulp.task('default', function() {gulp.run('npmscripts');//初始化browserSync
browserSync.init({server: {baseDir: "./"}});//监听js变化,如过发生变化则执行lint和scripts两个task
gulp.watch('./app/**/*.js', ['lint', 'scripts']);//监听js变化,如过发生变化则执行sass task
gulp.watch('./app/style/**/*.scss', ['sass']);//监听当app文件夹下任何文件发生变化，则自动刷新浏览器
gulp.watch('./app/**', function() {console.log('reload');browserSync.reload();});
})

配置Angularjs

配置路由

app.routes.js(function() {'use strict';angular.module('app', ['ui-router']).config(config);function config ($stateProvider, $urlRouterProvider) {$urlRouterProvider.otherwise('/index');$stateProvider.state('/index', {url: "/index",templateUrl: "views/index.html"})}
})()

配置首页

index.html
<!DOCTYPE html>
<html ng-app="app"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" /><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" /><title></title><link rel="stylesheet" href="../dist/css/style.css" charset="utf-8"><script src="../dist/js/npm.js"></script><script src="../dist/js/all.js"></script></head><body><div ui-view class="Index"></div></body>
</html>

在引用css和js的时候就可以直接引用在dest目录下合并了的文件了。
运行gulp，构建成功！并且修改代码浏览器内容自动刷新，更加方便了移动端的调试。

下面贴一个完整的gulpfile.js

var gulp = require('gulp');
//引入gulp组件
//js语法检查
var jshint = require('gulp-jshint');
//sass预处理
var sass = require('gulp-sass');
//文件合并
var concat = require('gulp-concat');
//js压缩
var uglify = require('gulp-uglify');
//重命名
var rename = require('gulp-rename');
//server服务
browserSync = require('browser-sync').create();var jsFiles = ['./node_modules/angular/angular.js','./node_modules/angular-ui-router/release/angular-ui-router.js'
];//检查脚本
gulp.task('lint', function() {gulp.src('./app/**/*.js').pipe(jshint()).pipe(jshint.reporter('default'));})//编译Sass
gulp.task('sass', function() {console.log('sass!');gulp.src('./app/style/*.scss').pipe(sass()).pipe(gulp.dest('./app/style'));gulp.src('./app/style/*.css').pipe(concat('style.css')).pipe(gulp.dest('./dist/css'))
})//合并、压缩js文件
gulp.task('scripts', function() {gulp.src('./app/**/*.js').pipe(concat('all.js')).pipe(gulp.dest('./dist/js')).pipe(rename('all.min.js')).pipe(uglify()).pipe(gulp.dest('./dist/js'));
});
//合并、压缩来自npm的js资源文件
gulp.task('npmscripts', function() {return gulp.src(jsFiles).pipe(concat('npm.js')).pipe(gulp.dest('./dist/js')).pipe(rename('npm.min.js')).pipe(uglify()).pipe(gulp.dest('./dist/js'));
})//合并、压缩css文件
// gulp.task('css', function() {
//   gulp.src('./app/style/*.css')
//     .pipe(concat('style.css'))
//     .pipe(gulp.dest('./dist/css'))
//     // .pipe(rename('style.min.css'))
//     // .pipe(uglify())
//     // .pipe(gulp.dest('./dist/css'));
// });//使用connect启动一个Web服务器
gulp.task('browserSync', function () {browserSync.init({server: {baseDir: "./app/"}});
});//默认任务
gulp.task('default', function() {gulp.run('npmscripts');//监听js变化
browserSync.init({server: {baseDir: "./"}});gulp.watch('./app/**/*.js', ['lint', 'scripts']);gulp.watch('./app/style/**/*.scss', ['sass']);// gulp.watch('./app/style/**/*.css', ['css'])gulp.watch('./app/**', function() {console.log('reload');browserSync.reload();});})