之前搭建过Grunt,但是用起来有点繁琐，后来有人跟我说gulp更多简单。所以今天又搭建一个gulp。
在使用gulp前应该有nodeJs环境，安装完nodejs后，就可以开始gulp的搭建了。
先新建一个文件夹test，如下：
然后打开Node.js命令窗口，进入test文件夹
在test文件夹中新建gulpfile.js
在nodeJs命令窗口中先安装后需要用到的插件：
npm install gulp-connect --save-dev
npm install gulp-concat --save-dev
npm install gulp-strip-debug --save-dev
npm install gulp-uglify --save-dev
npm install gulp-autoprefixer --save-dev npm install gulp-minify-css --save-dev
打开这个文件并编辑输入之后保存：
//引入插件
var gulp = require('gulp');
var connect = require('gulp-connect');
var concat = require('gulp-concat');
var stripDebug = require('gulp-strip-debug');
var uglify = require('gulp-uglify');
var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css'); //此处用于监听html,css,js文件是否修改，否有修改会调用后面相应的task
gulp.task('watch', function () {
gulp.watch(['./test/*.html'], ['html']);
gulp.watch(['./test/**/*.css'], ['styles']);
gulp.watch(['./test/**/*.js'], ['scripts']);
}); //使用connect启动一个Web服务器,在浏览器里默认从localhost:8080/进入
gulp.task('connect', function () {
connect.server({
root: 'test',
livereload: true
});
}); gulp.task('html', function () {
gulp.src('test/*.html')
.pipe(connect.reload());
}); gulp.task('styles', function() {
gulp.src(['./test/css/*.css'])
.pipe(concat('css.css'))
.pipe(autoprefix('last 2 versions'))
.pipe(minifyCSS())
.pipe(connect.reload())
.pipe(gulp.dest('./build/styles/'));
});
gulp.task('scripts', function() {
gulp.src(['./test/js/js.js'])
.pipe(concat('js.js'))
.pipe(stripDebug())
.pipe(uglify())
.pipe(connect.reload())
.pipe(gulp.dest('./build/scripts/'));
}); //运行Gulp时，默认调用的Task
gulp.task('default', ['connect', 'watch','styles','scripts']);
最后再从nodeJs命令窗口中输入gulp，就可以进行自动压缩，刷新页面了
