首页 > 代码库 > gulp使用

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="http://www.mamicode.com/js/main.min.js"></script>‘);            $(‘head‘).append(‘<link rel="stylesheet" href="http://www.mamicode.com/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 = http://www.mamicode.com/‘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‘]        );});

 

gulp使用