使用gulp自動化前端工做流

安裝gulp

gulp推薦安裝到項目目錄，不推薦全局目錄，由於後期gulp會自動引入項目相關的支持包，若是全局安裝gulp，這些支持包全都安裝在/usr/local/lib/node_modules/下，不利於管理，可能易引發衝突。

npm install gulp

安裝經常使用插件

// js壓縮
gulp-uglify
// css壓縮
gulp-clean-css
// 重命名
gulp-rename
// 合併文件
gulp-concat
// 捕獲錯誤
gulp-plumber
// 打包
gulp-zip
//過率console信息
gulp-strip-debug

在gulpfile.js中載入插件

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');
var plumber  = require('gulp-plumber');
var zip = require('gulp-zip');
var browserSync = require('browser-sync');

自動壓縮css重命名

定義一個任務compress-css,壓縮static文件夾下面的index.css,而且重命名爲index.min.css,保存到build文件夾下面

gulp.task('compress-css', function() {
    gulp.src('static/index.css')
        .pipe(minifyCss())
        .pipe(rename('index.min.css')) 
        .pipe(gulp.dest('build'));
});

自動壓縮js代碼而且重命名

定義一個任務compress-js,壓縮static文件夾下面的index.js,而且重命名爲index.min.js,保存到build文件夾下面

gulp.task('compress-js', function() {
    gulp.src('static/index.js')
        .pipe(uglify())
        .pipe(rename('index.min.js')) 
        .pipe(gulp.dest('build'));
});

自動合併文件

合併src下面的js文件，重命名爲all.js，保存在build文件夾下面

gulp.task('minify', function (){
     return gulp.src('src/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('build'))
});

執行某個任務

gulp teskname

監視文件變化

這裏定義一個默認的任務，只須要在gulp裏面輸入gulp

gulp.task('default', function(){
    gulp.watch('src/*.*', function(){
        gulp.run('teakname')
    });
});

打包發佈任務

新建任務zip，將build文件夾下面的文件所有打包爲publish.zip,發佈到release文件夾下面

gulp.task('zip', function(){
    return gulp.src('build/*')
        .pipe(plumber())
        .pipe(zip('publish.zip'))
        .pipe(gulp.dest('release'))
});

自動刷新瀏覽器

新建任務start，啓用一個本地server，監視當前目錄下的全部文件，一旦文件變化，瀏覽器reload

gulp.task('start', function() {
    browserSync.init({
        server: {
            baseDir: "./"
        }
    });

    gulp.watch('./*', function() {
        browserSync.reload();
    });
})

在build任務中過濾目標文件中的console.log();

var stripDebug = require('gulp-strip-debug');
gulp.task('build', function () {
        .gulp.src()
        .pipe(stripDebug())
        .pipe(gulp.dest());
});

監聽gulp任務結束,執行回調

gulp.task('dev', function(){
    gulp.src(src)
        .pipe(rename('app.js'))
        .on('end',function(){
           console.log('這裏是回調')
        })

});