gulp
简介：
gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；它不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成，使用它，让开发更加快速高效。
gulp是基于Nodejs的自动任务运行器， 它能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，它借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。
安装gulp
npm install gulp --save-dev
在当前工程目录下安装gulp后，需要初始化一个package.json 和新建一个gulpfile.js文件。
npm init
1.使用gulp进行代码的转换
- 使用gulp-react转换jsx代码
- 使用gulp-babel转换es6代码
- 使用gulp-less转换less代码
- 使用gulp-sass转换sass代码
es6代码的转换
需要安装的插件：gulp-react gulp-babel babel-preset-es2015
npm install gulp-react gulp-babel babel-preset-es2015 --save-dev
建立myui.js文件
'use static'
const react=require('react');
Class Myui extends react.component{
construtor(props){
super(props)
}
render(){
return(<div>hello gulp to es2015</div>)
}
}
gulpfile.js
var gulp=require('gulp');
var react=require('gulp-react');
var babel=require('gulp-babel');
gulp.task('default',function(){
return gulp.src('./myui.js')
.pipe(react())
.pipe(babel(){
preset:['babel-preset-es2015']
})
.pipe(gulp.dest('./dest')
})
babel-preset-es2015这个是不用引入的，是在运行babel的时候，在里面通过数组的方式传参，内部调用库
gulp 运行
转less和sass
css1.less
@base:#333;
.box{
color:@base
}
css2.scss
$base:#333;
.box{
color:$base
}
gulpfile.js
var gulp=require('gulp');
var less=require('gulp-less');
var scss=require('gulp-scss');
gulp.task('task1',function(){
return gulp.src('./css1.less')
.pipe(less())
.pipe(gulp.dest('./dest')
});
gulp.task('task2',function(){
return gulp.src('./css2.scss')
.pipe(sass())
.pipe(gulp.dest('./dest')
});
gulp.task('default',['task1','task2'],function(){
console.log("ok")
});
运行gulp后，先按['task1','task2']顺序执行任务，最后执行console.log("ok");
2.代码测试
- 通过gulp-mocha插件测试
- 通过gulp-jasmine插件测试
mocha
需要安装的插件：mocha should
npm gulp-mocha should --save-dev
should 是用来判定一个值是否存在或者相等
建立test1.js文件
var should=require("should");
describe('test one',function(){
it('test1',function(){
var obj={'name':"我是谢逸"};
should.exist(obj);
});
});
gulpfile.js
var gulp=require('gulp');
var mocha=require('gulp-mocha');
gulp.task('default',function(){
return gulp.src('./test1.js')
.pipe(mocha())
})
jasmine
需要安装的插件：jasmine
npm gulp-jasmine --save-dev
建立test2.js文件
describe('test one',function(){
it('test1',function(){
expect(true).ToBe(true)
});
});
gulpfile.js
var gulp=require('gulp');
var jasmine=require('gulp-jasmine');
gulp.task('default',function(){
return gulp.src('./test2.js')
.pipe(jasmine())
})
使用gulp进行模块化开发
可以把前端的代码像编写后端的node.js一样，代码转化后，会形成一个打包后的js文件
要用到的插件：browserify
npm install gulp-browserify --save-dev
新建user.js
mould.export=function(name){
this.name=name
}
新建main.js
var user=require('./user');
console.log('xy');
gulpfile.js
var gulp=require('gulp');
var browserify=require('gulp-browserify');
gulp.task('default',function(){
return gulp.src('./test2.js')
.pipe(browserify())
})
使用gulp进行代码的压缩和合并
压缩，可以把代码中的空格，换行去掉，变量名压缩；合并，可以把两个文件合并在一个；
压缩要用到的插件： gulp-uglify gulp-browerify
npm gulp-uglify gulp-browerify --save-dev
gulp-uglify 的参数 默认开启会打乱变量名，类名，构造函数，细微参数
合并要用到的插件： gulp-concat
css压缩要用到 ：gulp-minify-css
gulpfile.js
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var watch = require('gulp-watch');
var minifyCSS = require('gulp-minify-css');
var browserify=require('gulp-browserify');
var paths = {
scriptss: ['public/js/index.js', 'public/js/add.js', 'public/js/admin.js', 'public/js/edit.js'],
sascss: ['public/css/m_index.css']
};
gulp.task('default',['task1','sass','watch'], function() {
console.log("ok");
});
gulp.task('task1',function(){
gulp.src(paths.scriptss)
.pipe(browserify())
.pipe(uglify())
.pipe(concat("all.min.js"))
.pipe(gulp.dest('public/bulid'));
})
gulp.task('sass', function() {
console.log("ok3");
// 将你的默认的任务代码放在这
gulp.src(paths.sascss)
.pipe(minifyCSS())
.pipe(concat("all.css"))
.pipe(gulp.dest('public/bulid'));
});
gulp.task('watch', function() {
gulp.watch(paths.scriptss, ['default']);
gulp.watch(paths.sascss, ['sass']);
});
网友评论