gulp

jasmine

• jasmine是一个行为驱动开发的测试框架，不依赖任何js框架以及dom，是一个非常干净的以及友好的API的测试库
• describe函数来定义测试大体的中心内容
• it是用来定义单个具体测试内容
• expect主要用来计算一个变量或者一个表达式的值
• beforeEach与afterEach主要是用来在执行测试 任务 之前和之后做的一些事

运行

karma start karma.conf.js

NG的测试单元

• 因为ng本省框架的原因，模块都是通过di来加载以及实例化的。所以为了方便 配合jasmine来编写测试脚本，所以官方提供了angular-mock.js的一个测试工具类来提供模块定义，加载注入等等
• angular.mock.module此方法同样在window命名空间下，非常方便调用
• Module是用来配置inject方法注入的模块信息，参数可以是字符串，函数，对象
• 他一般用在beforeEach方法里，因为这个可以确保在执行测试任务的时候，inject方法可以获取到配置模块

测试控制器

controller作用是对scope进行初始化，赋予数据，赋予行为，所以测试控制器就是测试scope额值是否正确

gulp

可以自动化执行任务的工具，在平时开发流程里面，一定有一些动作需要手工的重复去执行，比如：

• 把一个文件拷贝到另一个位置
• 把多个js或者css文件合并成一个文件，以减少网络请求数
• 对JS文件和CSS技能型合并压缩以减少网络流量
• 吧Sass或者less文件编译成css文件
• 压缩图像文件，以减少网络流量
• 创建一个可以实时刷新网页内容的本地服务器等等
  只要你觉得有些动作是要重复的去做，一般你就可以吧这些动作创建成一个gulp任务，然后在指定的条件下，比如文件发生变化以后，自动去执行这些任务

gulp特点

• 易于使用：通过代码优于配置的策略，Gulp让简单的任务简单，复杂的任务可以管理
• 快速 构建：利用node.js流的威力，你可以快速的构建项目并减少频繁的io操作。前一集的输出，直接变成后一集的输入，使其在操作上变的简单
• 高质量的插件:gulp严格的插件指南确保插件如你期望的那样简洁的工作
• 易于学习：通过最少的API,掌握gulp毫不费力，构建工作尽在掌握

流的概念

• Stream是nodejs各种对象实现的抽象接口
• 比如标准输入是一个流，标准输出也是一个流
• 所有的stream对象都是EventEmitter的实例，可以发射事件
• 流是一种有起点和终点的数据传输 手段

gulp中的流

• gulp正是通过流和代码优于配置的策略来劲量简化任务编写的工作
• 类似jquery里的链式操作，把 各个方法串联起来构建完整的任务
• 用gulp编写编写任务也可以看做是用Node.js编写任务
• 当使用流时，gulp不需要使用大量的中间文件，只将最后的输出写入磁盘，整个过程因此变得非常块

安装gulp

在 项目中使用Gulp需要：
- 在全局范围内去安装一下gulp的命令工具
- 然后在去项目里面再去本地安装gulp

gulp命令行工具

• 使用npm install去安装gulp，注意加一个-g的参数，表示在全局范围内去安装
• 一般使用npm安装的时候用一个-g参数就行，这个安装的东西会作为命令去执行
• 如果你在mac和linux下遇到 了权限问题，在下面这个命令的前面加上sudo npm install gulp -g并输入mac密码

npm install -g gulp

安装完成之后可以输入gulp –help
如果输入一些帮助的信息就表示可以gulp命令行成功安装了
如果安装不上可以换一下源试试

创建配置文件

gulp的任务要放到一个叫做gulpfile.js的文件里面，现在项目额根目录下创建一个这样的文件，然后再这个文件的顶部添加下面这行代码：

var gulp=require('gulp');

创建gulp任务

可以使用gulp的task方法
同样我们去创建一个叫做hello的任务，它要做的事就是再控制台上输出你好这两个字
第一个参数就是任务的名称，第二个参数事任务的定义，是一个匿名函数

gulp.task('hello',function(){
    console.log('hello');
})

gulp后面跟着任务的名称，不输入任务名称的话默认是default

执行其他任务

gulp <task><othertask>

gulp.js的工作方法

gulp的使用流程一般是：首先通过gulp.src()方法获取到想要处理的文件流
然后把文件流通过pipe方法导入到gulp插件中
最后把经过插件处理的流再次通过pipe方法导入到gulp.dest()中
gulp.dest()方法则把流中的内容写到文件中

gulp依赖的任务

var gulp = require('gulp');
var fs = require('fs');
var Q = require('q');
gulp.task('hello', function() {
    gulp.src('app/src.js').pipe(gulp.dest('dist/dest.js'));
})
gulp.task('1', function() {
    console.log('1');
});
gulp.task('2', function() {
    console.log('2');
});
gulp.task('3', function() {
    var defer = Q.defer();
    setImmediate(function() {
        fs.writeFile('1.txt', 'hello', function(err) {
            defer.resolve('成功');
        });
    });
    return defer.promise;
});
gulp.task('4', function() {
    console.log('4');
});
gulp.task('default', ['1', '2', '3', '4'], function() {
    fs.readFile('1.txt', 'utf8', function(err, data) {
        console.log(data);
    })
});

安装

npm install gulp-imagemin –save -dev

其中处理异步函数用了q这个模块。还有一种是是使用callback
gulp-load-plugins这个插件能自动帮你加载package.jspn文件里面的gulp插件
使用的时候原来是gulp-connect.现在可以写成：$.connect

html文件压缩

使用的是gulp-minify-html插件

var gulp=require('gulp');
minifyHtml=require('gulp-minify-html');
gulp.task('minify-html',function(){
    gulp.src(''src/*.html)//要压缩的Hmtl文件
    .pipe(minifyHtml())//压缩
    .pipe(gulp.dest('dist/html'));//输出的目的地
});

gulp-rename重命名

var gulp=require('gulp');
var concat=require('gulp-concat');
var uglify=require('gulp-uglify');
var rename=require('gulp-rename');
gulp.task('uglify',function(){
    return gulp.src(['app/js/*.js','!app/js/*.tmp.js'])//指定要处理的文件
    .pipe(concat('app.js'))//合并成一个文件
    .pipe(gulp.dest('dist/js'))//保存此文件
    .pipe(uglify())//进行压缩
    .pipe(rename('app.min.js'))//对此文件进行重命名
    .pipe(gulp.dest('dist/js'));//再输出一次
});

gulp-minify-css压缩css

var gulp=require('gulp');
var less=require('gulp-css');
var minify=request('gulp-minify-css')
var rename=require('gulp-rename');
gulp.task('minify',function(){
    return gulp.src('app/less/page.less')//指定less文件
    .pipe(less())//吧Less编译成css
    .pipe(gulp.dest('dist/css'))//输出到目的地
    .pipe(minify())//对css再次进行压缩
    .pipe(rename('page.min.css'))//对此文件进行重命名
    .pipe(gulp.dest('dist/css'));//再输出一次
});
gulp.task('default',['less']);

gulp-imagemin

如果要想在不改变图像质量的情况下，让图像文件的体积拜年的更小

var gulp=require('gulp');
var imagemin=require('gulp-imagemin');
gulp.task('copy-images',function(){
    return gulp.src('app/imgs/**/*.{jpg.png}')//指定要压缩的图片
    .pipe(imagemin())//进行图片压缩
    .pipe(gulp.dest('dist'));//输出 目的地
});
gulp.task('default',['copy-images']);

gulp-jshint代码检查

var gulp=require('gulp');
var jshint=require('gulp-jshint');
gulp.task('jshint',function(){
     gulp.src('src/*.js')//指定要压缩的图片
    .pipe(jshint())//进行图片压缩
    .pipe(jshint.reporter());//输出检查结果
});