gulp使用

Posted 2020-08-09

 

 

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‘]
        );
});