gulp

喜欢ヅ旅行 2022-05-24 12:44 168阅读 0赞

## 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');
    })

![这里写图片描述][70]  
gulp后面跟着任务的名称，不输入任务名称的话默认是default

## 执行其他任务 ##

gulp <task><othertask>

## gulp.js的工作方法 ##

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

## gulp依赖的任务 ##

## 安装 ##

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

[70]: /images/20220524/39a72725571c42729012a3b5be37fa1e.png