gulp的安装和使用
1. gulp的安装：
npm install gulp -g
1
1
2. 创建一个文件夹gulpTest，在该文件夹下：
npm init
1
1
生成package.json
3. 在gulpTest文件夹下安装局域gulp:
npm install gulp --save-dev
1
1
就这样我们就安装好了gulp，可通过gulp -v 查看是否安装成功，接下来开始gulp的使用
gulp的使用
在各功能使用之前，我们需要创建配置文件gulpfile.js
一：压缩和合并js文件
1. 这里需要安装gulp-uglify，gulp-concat
npm install gulp-uglify gulp-concat --save-dev
1
1
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>
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
3.创建main1.js：
var main1 = {};
main1 = {
test:function(argument){
document.write("This is Main1");
}
}
main1.test();
1
2
3
4
5
6
7
1
2
3
4
5
6
7
4.创建main2.js：
main2 = {
test:function(argument){
document.write("This is Main2");
}
}
main2.test();
1
2
3
4
5
6
1
2
3
4
5
6
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'))
});
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
在终端直接运行 gulp
这里写图片描述
二：ES6的转换，react的编译
npm install gulp-react gulp-babel babel-preset-es2015 --save-dev
1
1
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'));
})
<div class="bottom_soft_link">
<a target="_blank" class="bottom_soft_link_ios" href="xxx.com" title="客户端苹果手机APP下载">下载</a>
<a target="_blank" class="bottom_soft_link_ios" href="http://www.wfqcp.com/" title="潍坊汽车站时刻表">潍坊汽车站时刻表</a>
</div>
浙公网安备 33010602011771号