基本gulpfile.js

来源:互联网 发布:网络监控调试方案 编辑:程序博客网 时间:2024/06/06 03:58
/** * Created by wangdanting on 16/11/22. */const gulp = require('gulp');const del = require('del');//less autoprefixconst lessAutoprefix = require('less-plugin-autoprefix');const autoprefix = new lessAutoprefix({browsers: ['last 2 versions']});//load gulp pluginsconst gulpLoadPlugins = require('gulp-load-plugins');const plugins = gulpLoadPlugins({    scope: ['devDependencies'],    rename: {        'gulp-clean-css': 'cleanCSS',        'gulp-minify-html': 'minifyHTML',        'gulp-rev-replace': 'revReplace',        'gulp-rev-css-url': 'revCSSURL'    }});//生产环境var isProduction = process.env.NODE_ENV !== 'dev';//合并文件const CSS_FILENAME = 'app.css';const JS_FILENAME = 'app.js';//目录配置var  paths = {    html: 'src/**/*.html',    js: 'src/**/*.js',    css: 'src/**/*.css',    template: ['src/**/*.html'],    less: 'src/**/*.less',    image: {        gif: 'src/**/*.gif',        jpg: 'src/**/*.jpg',        png: 'src/**/*.png'    },    font: {        woff: 'src/**/*.woff',        eot: 'src/**/*.eot',        svg: 'src/**/*.svg',        ttf: 'src/**/*.ttf'    },    dist: 'dist'};//task cleangulp.task('clean', function(callback) {    var distPath = 'dist/**/*';    return del(distPath, callback);});gulp.task('build-assets', ['clean'], function() {    var jsFilter = plugins.filter(['**/*.js'], {        restore: true    });    var cssFilter = plugins.filter(['**/*.css'], {        restore: true    });    var lessFilter = plugins.filter(['**/*.less'], {        restore: true    });    var imageFilter = plugins.filter(['**/*.gif', '**/*.jpg', '**/*.png'], {        restore: true    });    var srcPaths = [        paths.js,        paths.css,        paths.less,        paths.image.gif,        paths.image.jpg,        paths.image.png,        paths.font.woff,        paths.font.eot,        paths.font.svg,        paths.font.ttf    ];    return gulp.src(srcPaths)         .pipe(plugins.plumber({errorHandler: plugins.notify.onError("错了。。")}))        // .pipe(plugins.notify("hello time"))        .pipe(plugins.flatten())    //remove or replace relative path for files        .pipe(lessFilter)   //less        .pipe(plugins.less())        .pipe(lessFilter.restore)        .pipe(cssFilter)    //minify css        .pipe(plugins.concat(CSS_FILENAME))        .pipe(plugins.less({plugins: [autoprefix]}))    //prefix        .pipe(plugins.cleanCSS())        .pipe(cssFilter.restore)        .pipe(jsFilter) //minify js        .pipe(plugins.concat(JS_FILENAME))        .pipe(plugins.if(isProduction, plugins.uglify()))   //gulp-if        .pipe(jsFilter.restore)        .pipe(imageFilter)  //minify image        .pipe(plugins.if(isProduction, plugins.imagemin({            progressive: true,  //Lossless conversion to progressive            interlaced: true    //interlace gif for progressive rendering        })))        .pipe(imageFilter.restore)        .pipe(plugins.rev())    //appending hash        .pipe(plugins.rename(function(path) {   //rename to hash            path.basename = path.basename.replace(/[\w\.]+-/g, '');            return path;        }))        .pipe(plugins.revCSSURL())  //the lightweight plugin to override urls in css files to hashed after gulp-rev        .pipe(gulp.dest(paths.dist))    //dest        .pipe(plugins.rev.manifest())   //rev manifest        .pipe(gulp.dest('./'));});//task buildgulp.task('build', ['build-assets'], function() {    var manifestFile = gulp.src('./rev-manifest.json');    return gulp.src(paths.html)        .pipe(plugins.revReplace({  //rewrite occurences of filenames which have been renamed by gulp-rev            manifest: manifestFile,            prefix: 'dist/'         //default prefix        }))        .pipe(plugins.flatten())        .pipe(plugins.minifyHTML({            empty: true,    //do not remove empty attributes            spare: true,    //do not remove redundant attributes            quotes: true,   //do not remove arbitrary quotes            conditionals: true  //do not remove conditional internet explorer comments        }))        .pipe(gulp.dest('./'))});//task watchgulp.task('watch', function() {    gulp.watch(paths.js, ['build']);    gulp.watch(paths.css, ['build']);    gulp.watch(paths.less, ['build']);    gulp.watch(paths.html, ['build-assets']);});//task devgulp.task('default', ['build', 'watch']);//task releasegulp.task('release', ['build']);

0 0