gulp使用

 

 

gulpfile.js:從開發到生產，功能有：壓縮合並、添加版本號

var gulp = require('gulp'),                                      //引入gulp核心文件包
    concat = require('gulp-concat'),                            //- 多個文件合併爲一個
    minifyCss = require('gulp-minify-css'),                   //- 壓縮CSS爲一行
    rev = require('gulp-rev'),                                //- 對文件名加MD5後綴
    revCollector = require('gulp-rev-collector'),              //- 路徑替換
    cleanCSS = require('gulp-clean-css'),                      //清除css
    uglify = require('gulp-uglify'),                           //- 壓縮js爲一行
    rename = require('gulp-rename'),                           //重命名
    jshint=require('gulp-jshint'),                             //js語法檢查
    htmlmin = require('gulp-htmlmin'),                         //html壓縮
    connect = require('gulp-connect'),                         //服務器包 
    less = require('gulp-less');
    path = require('path'),
    domSrc = require('gulp-dom-src'),
    cheerio = require('gulp-cheerio'),
    gulpSequence = require('gulp-sequence'),
    imagemin = require('gulp-imagemin'),//圖片壓縮
    notify = require('gulp-notify'),
    pngcrush = require('imagemin-pngcrush'),
    runSequence = require('run-sequence'),
    del = require('del');

//[開發使用]
// 將less文件編譯爲css文件
gulp.task('less',function(){
    gulp.src('app/less/*.less')
        .pipe(less())
        .pipe(gulp.dest('app/css'));
})
//監督任務一：less文件改變動新css文件
gulp.task('changeLess',function(){
    gulp.watch('app/**/*.less',['less']);
})

//開啓服務器，並監聽實時更新文件
gulp.task('serve',function(){
    connect.server({
        root:'app',
        livereload:true
    });
    gulp.watch('app/**/*.*',['reload','changeLess']);
})
//監督任務二：自動更新
gulp.task('reload',function(){
    gulp.src('app/**/*.*')
        .pipe(connect.reload());
});

//[生產使用]
//壓縮,合併css 到對應目錄下
gulp.task('minifycss', function() {
    return gulp.src('app/css/*.css')    //須要操做的文件
        .pipe(concat('main.css'))    //合併全部css到main.css
        .pipe(gulp.dest('app/css'))       //輸出到文件夾
        .pipe(rename({suffix: '.min'}))   //rename壓縮後的文件名
        .pipe(cleanCSS({compatibility: 'ie7'}))   //執行壓縮
        .pipe(gulp.dest('dist/css'));   //輸出文件夾
});

//壓縮,合併 js到對應目錄下
gulp.task('minifyjs', function() {
    return gulp.src('app/js/*.js')      //須要操做的文件
        .pipe(concat('main.js'))    //合併全部js到main.js
        .pipe(gulp.dest('app/js'))       //輸出到文件夾
        .pipe(rename({suffix: '.min'}))   //rename壓縮後的文件名
        .pipe(uglify())    //壓縮
        .pipe(gulp.dest('dist/js'));  //輸出
});

//壓縮html到對應目錄下
gulp.task('minifyhtml', function() {
  return gulp.src('app/*.html')
    .pipe(htmlmin({collapseWhitespace: true}))
    .pipe(gulp.dest('dist'));
});

//壓縮img 到對應目錄下
gulp.task('minifyimg', function() {
  return gulp.src('app/images/*')
    .pipe(imagemin({
        progressive: true,
        svgoPlugins: [{removeViewBox: false}],
        use: [pngcrush()]
    }))
    .pipe(gulp.dest('dist/images/'));
    
});



//更改生產文件下引入css和js連接
gulp.task('newindex', function() {
    return gulp.src('dist/index.html')
        .pipe(cheerio(function ($) {
            $('script').remove();
            $('link').remove();
            $('body').append('<script src="js/main.min.js"></script>');
            $('head').append('<link rel="stylesheet" href="css/main.min.css">');
        }))
        .pipe(gulp.dest('dist/'));
});

//一次性執行多個任務
gulp.task('allmini',['minifycss','minifyjs','minifyhtml','minifyimg']);

//生產時只須要執行這一個任務'product'
gulp.task('product',gulpSequence('allmini','newindex'));


//生產使用基礎上添加版本 //定義css、js源文件路徑
var cssSrc = 'dist/css/*.css',
    jsSrc = 'dist/js/*.js';


//CSS生成文件hash編碼並生成 rev-manifest.json文件名對照映射
gulp.task('revCss', function(){
    return gulp.src(cssSrc)
        .pipe(rev())
        .pipe(gulp.dest('view/css'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('rev/css'));
});


//js生成文件hash編碼並生成 rev-manifest.json文件名對照映射
gulp.task('revJs', function(){
    return gulp.src(jsSrc)
        .pipe(rev())
        .pipe(gulp.dest('view/js'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('rev/js'));
});


//Html替換css、js文件版本
gulp.task('revHtml', function () {
    return gulp.src(['rev/**/*.json', 'dist/*.html'])
        .pipe(revCollector())
        .pipe(gulp.dest('view'))
        .pipe(notify({ message: 'all task ok' }));
});


//加版本
gulp.task('dev', function (done) {
    runSequence(
        ['revCss'],
        ['revJs'],
        ['revHtml']
        );
});

//開發以前清除文件
gulp.task('clean', function (cb) {
  del([
    // 這裏咱們使用一個通配模式來匹配 `mobile` 文件夾中的全部東西
    'dist/**/*',
    'view/**/*',
    'rev/*',
    // 咱們不但願刪掉這個文件，因此咱們取反這個匹配模式
  ], cb);
});




//任務排序打包
gulp.task('default', function (done) {
    runSequence(
        ['product'],
        ['dev']
        );
});