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());//输出检查结果
});