基于gulp构建的angular1.x自动化项目

基于gulp构建的angular1.x自动化项目

csdn地址

gulp简介

官网定义：基于流的自动化构建工具，如果你查看它的网页源代码，还会看
到在标签里有一段更详细的描述：如果你查看它的网页源代码，还会看到
在标签里有一段更详细的描述：Gulp.js 是一个自动化构建工具，开发者
可以使用它在项目开发过程中自动执行常见任务。Gulp.js 是基于 Node.js 构建
的，利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。
Gulp.js 源文件和你用来定义任务的 Gulp 文件都是通过 Javascript（或者
Coffeescript ）源码来实现的。

注意：本文主要介绍gulp与angular的实现，关于gulp安装所需环境node、cnpm等不再介绍

gulp内部实现 流

在计算机系统中文件的大小是变化很大的，有的文件内容非常多非常大，而
Node.js 里文件操作是异步的，如果用一个形象的比喻来形容将一个文件的内容
读取出来并写入另一个文件中，可以将它想象成文件内容像是水流，从一个文件
“流”入另一个文件。

nodejs中的流

在 node 里面，读写文件可以用“流”来描述：

"use strict";
let fs = require("fs");
fs.createReadStream("./in.txt")
.pipe(fs.createWriteStream("./out.txt"));

上面的代码除了将 in.txt 文件中的内容输出到 out.txt 之外，不做其他任何
事情，相当于复制了一份数据，从语法形式上可以看到，“数据流”从
fs.createReadStream 创建然后经过 pipe 流出，最后到 fs.createWriteStream。
在这输入流到输出流的中间，我们可以对“流”做一些事情。
这就是gulp内部实现最重要的部分，后面会看到很多gulp的实现的如下代码片段：

    .src('static/less**.less') // 读取流
    .pipe(gulp.dest('static/css')) // 输出流

gulp基本api

gulp.src()

gulp.src(globs[, options])

globs参数是文件匹配模式(类似正则表达式)，用来匹配文件路径(包括文件名)
gulp.src()方法正是用来获取流的，但要注意这个流里的内容不是原始的文件流，而是一个虚拟文件对象流(Vinyl files)，这个虚拟文件对象中存储着原始文件的路径、文件名、内容等信息。
gulp.task()

方法用来定义任务，
gulp.task(name[, deps], fn)
gulp.dest()

gulp.dest(path[,options])
gulp.dest()方法是用来写文件的，
gulp的使用流程一般是这样子的：首先通过gulp.src()方法获取到我们想要处理的文件流，然后把文件流通过pipe方法导入到gulp的插件中，最后把经过插件处理后的流再通过pipe方法导入到gulp.dest()中，gulp.dest()方法则把流中的内容写入到文件中，这里首先需要弄清楚的一点是，我们给gulp.dest()传入的路径参数，只能用来指定要生成的文件的目录，而不能指定生成文件的文件名，它生成文件的文件名使用的是导入到它的文件流自身的文件名，所以生成的文件名是由导入到它的文件流决定的。
```
var gulp = require('gulp');
gulp.src('script/jquery.js')
    .pipe(gulp.dest('dist/foo.js'));
//最终生成的文件路径为 dist/foo.js/jquery.js,而不是dist/foo.js 
```
gulp.watch()

用来监视文件的变化，当文件发生变化后，我们可以利用它来执行相应的任务，例如文件压缩等。
```
gulp.task('uglify',function(){ //do something }); gulp.task('reload',function(){ //do something }); 
gulp.watch('js*.js', ['uglify','reload']);
```
gulp 结合angular的构建 目录结构

├─.gitee
├─components----------------------------------------lib库
│  ├─angular
│  ├─angular-bootstrap
│  ├─angular-ui-router
│  │  ├─api
│  │  ├─release
│  │  └─src
│  ├─require-css
│  └─requirejs
├─controller----------------------------------------页面控制器
│  ├─homePage
│  └─main
├─html----------------------------------------------展示demo
│  ├─base
│  └─Promote
├─dist
├─route---------------------------------------------路由
├─static--------------------------------------------静态文件
│  ├─css
│  │  └─common
│  ├─images
│  └─less
│      └─common
└─views---------------------------------------------项目view
    ├─common
    └─homepage

项目介绍 对静态资源进行监听，编译，使用模块如下：

browser-sync
run-sequence
gulp-htmlmin
gulp-less
gulp-autoprefixer
gulp-sourcemaps
gulp-cssnano
gulp-uglify
gulp-imagemin
gulp-util

使用browser-sync 来进行本地静态资源服务器及刷新浏览器


gulp.task('browserSync', () => {
    browserSync({
 server: {
     baseDir: './',
     index: 'index.html'
 }
    })
});


使用run-sequence 来同步运行任务插件
gulp.task('default', (callback) => {
    runSequence(['browserSync', 'watch'], callback);
})

引入less，使用gulp-less，gulp-autoprefixer，gulp-sourcemap，gulp-cssnano 来编译压缩

gulp.task('less', () =>
    gulp
    .src('static/less/bootstrap.less')
    .pipe(sourcemaps.init())
    .pipe(less())
    .pipe(sourcemaps.write({ includeContent: false }))
    .pipe(autoprefixer())
    .pipe(sourcemaps.write('/'))
    .pipe(gulp.dest('static/css'))
    .pipe(browserSync.reload({ stream: true }))
);

引入gulp-uglify压缩js

gulp.task('script', () => {
    gulp.src(['controller*.js'])
    .pipe(uglify())
    .pipe(gulp.dest('dist'));
});

引入gulp-imagemin压缩图片

gulp.task('image', () => {
    gulp.src('static/images*')
 .pipe(imagemin({ progressive: true }))
 .on('error', gutil.log)
 .pipe(gulp.dest('dist/images'));
});

引入gulp-util输出压缩日志

项目入口

使用的库主要是
requirejs
angular
angular-ui-router
使用requirejs 来加载页面所需的js
var CURRENT_PATH = '/'
var COMPONENTS_PATH = './components/';

require.config({
    paths: {
 'angular': COMPONENTS_PATH + 'angular/angular',
 'app': CURRENT_PATH + 'app',
 'ui-route': COMPONENTS_PATH + 'angular-ui-router/release/angular-ui-router',
 'route': CURRENT_PATH + 'route/angular.route',
    },
    shim: {
 'angular': {
     exports: 'angular'
 },
 'ui-route': {
     deps: ['angular'],
     exports: 'ui-route'
 }
    }
})

引入
require([
    'angular',
    'app',
    'route',
    'ui-route',
    './controller/controller',
], function() {
    angular.bootstrap(document, ['webapp']);
})

angular 入口 app.js

    var app = angular.module('webapp', [
 'ui.router',
 'webapp.Ctrl',
    ]);
    return app;

angular 路由定义 angular.route.js

var PATH_LAYOUT = './views/common/layout.html';

var PATH_MENU = './views/common/menu.html';

$stateProvider.state('index', {
    url: '/index',
    views: {
 'layout': {
     templateUrl: PATH_LAYOUT
 },
 'side@index': {
     templateUrl: PATH_MENU
 },
 'main@index': {
     templateUrl: './views/homepage/index.html'
 }
    }
})

gulpfile.js文件
var gulp = require('gulp');
// 自动同步浏览器插件
var browserSync = require('browser-sync');
// 同步运行任务插件
var runSequence = require('run-sequence');
// html
var htmlmin = require('gulp-htmlmin');
// 编译less
var less = require('gulp-less');
// 给css3属性添加浏览器前缀插件
var autoprefixer = require('gulp-autoprefixer');
// css map
var sourcemaps = require('gulp-sourcemaps');
// 压缩css插件
var cssnano = require('gulp-cssnano');
var cleanCSS = require('gulp-clean-css');
var concat = require('gulp-concat');
// 压缩js
var uglify = require('gulp-uglify');
// 压缩图片
var imagemin = require('gulp-imagemin');
// 压缩日志
var gutil = require('gulp-util');
// 起本地静态资源服务器，及监听
gulp.task('browserSync', () => {
    browserSync({
 server: {
     baseDir: './',
     index: 'index.html'
 }
    });
});
gulp.task('testHtmlmin', ()=> {
    var options = {
 removeComments: true,//清除HTML注释
 collapseWhitespace: true,//压缩HTML
 collapseBooleanAttributes: true,//省略布尔属性的值  ==> 
 removeEmptyAttributes: true,//删除所有空格作属性值  ==> 
 removescriptTypeAttributes: true,//删除