gulp自动刷新和css、js压缩

之前搭建过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，就可以进行自动压缩，刷新页面了