gulp的有点和特性
- 易于使用
- 构建快速
- 插件高质
- 易于学习
学了解更多的gulp,可以在其官网http://www.gulpjs.com.cn学习
1. gulp的安装:
npm install gulp -g
2. 创建一个文件夹gulpTest,在该文件夹下:
npm init
生成package.json
3. 在gulpTest文件夹下安装局域gulp:
npm install gulp --save-dev
就这样我们就安装好了gulp,可通过gulp -v 查看是否安装成功,接下来开始gulp的使用
gulp的使用
在各功能使用之前,我们需要创建配置文件gulpfile.js
一:压缩和合并js文件
1. 这里需要安装gulp-uglify,gulp-concat
npm install gulp-uglify gulp-concat --save-dev
2.创建index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="build/all.min.js"></script>
</head>
<body></body>
</html>
3.创建main1.js:
var main1 = {};
main1 = {
test:function(argument){
document.write("This is Main1");
}
}
main1.test();
4.创建main2.js:
main2 = {
test:function(argument){
document.write("This is Main2");
}
}
main2.test();
5.gulpfile.js:
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
gulp.task('default',function(){
gulp.src=('./js/*.js')
.pipe(uglify())
.pipe(concat('all.min.js'))
.pipe(gulp.dest('build'))
});
在终端直接运行 gulp
二:ES6的转换,react的编译
npm install gulp-react gulp-babel babel-preset-es2015 --save-dev
gulp-babel是对es6的转换,还需要安装依赖库babel-preset-es2015,这样就可以将es6转换成es5
1.修改gulpfile.js:
var gulp = require('gulp');
var react = require('gulp-react');
var babel = require('gulp-babel');
gulp.task('default',['less'],function(){
return gulp.src('./js/main.js')
.pipe(react())
.pipe(babel({
presets:['babel-preset-es2015']
}))
.pipe(gulp.dest('./build'));
})
2.main.js:
先安装react模块
npm install react --save-dev
'use strict';
const react = require('react');
class Main extends react.Componet{
constructor(props){
super(props);
}
render(){
return (
<div>hello gulp react,i am yidong</div>
)
}
}
在终端运行gulp,查看build/main.js会发现已经自动生成es5代码了
三:less,sass的编译
由于less,sass的编译过程是同样的,所以这里我只对sass做例子
npm install gulp-less --save-dev
1.gulpfile.js
gulp.task('sass',function(){
return gulp.src('./sass/sass_css.scss')
.pipe(sass())
.pipe(gulp.dest('./build/css'));
});
2.创建sass文件夹,创建文件sass_css.scss:
$baseColor:#222;
.box{color:$base}
运行 gulp,可以看到新生成的sass_css.css:
.box {
color: #222;
}
四:模块化bowserify
将我们的文件打包成模块,就像写node.js一样。
npm install gulp-browserify browserify --save-dev
1.gulpfile.js:
gulp.task('default',function(){
return gulp.src('./module_test.js')
.pipe(browserify())
.pipe(gulp.dest('./build'));
})
2.创建User.js:
module.exports = function User(name){
this.name = name;
}
3.创建module_test.js:
var User = require('./User.js');
console.log(new User('I am YIDONG'))
运行gulp,查看build中的mudolue_test.js。