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，就能夠進行自動壓縮，刷新頁面了