Gulp折腾记 - （3）常用任务构建的demo[改进版]

项目地址:

https://github.com/crperlin/StartFrontendProject

---

任务队列

• 编译SCSS -> CSS
• AMD文件优化
• 压缩JS/HTML/CSS/图片
• 合并文件
• JS语法检测
• 添加后缀名
• 浏览器实时预览更新
• 清除文件
• ES6文件转换
• 雪碧图生成

---

Gulpfile.js

/**
 * cnpm install gulp imagemin-svgo gulp-notify  gulp-babel babel-preset-es2015 gulp.spritesmith vinyl-buffer gulp-csso gulp-amd-optimizer  gulp-plumber gulp-notify  gulp-sourcemaps gulp-jshint  gulp-uglify gulp-sass gulp-cssnano gulp-autoprefixer  gulp-ifnpm gulp-size gulp-concat gulp-rimraf gulp-rename gulp-postcss gulp-scss-lint gulp-imagemin browser-sync --save-dev
 */


'use strict';
var gulp = require('gulp'),                                                          //gulp
    sass         = require('gulp-sass'),                                             //sass编译
    concat       = require('gulp-concat'),                                           //合并JS
    uglify       = require('gulp-uglify'),                                           //压缩JS
    cssnano      = require('gulp-cssnano'),                                          //压缩CSS
    imagemin     = require('gulp-imagemin'),                                         //压缩图片
    pngquant     = require('imagemin-pngquant'),                                     //深度压缩图片
    autoprefixer = require('gulp-autoprefixer'),                                     //自动补齐前缀
    rimraf       = require('gulp-rimraf'),                                           //清除文件
    rename       = require('gulp-rename'),                                           //重命名
    plumber      = require('gulp-plumber'),                                          //错误提示
    amdOptimize  = require('gulp-amd-optimizer'),                                    //requirejs 压缩
    sourcemaps   = require('gulp-sourcemaps'),                                       //sourcemaps
    spritesmith  = require('gulp.spritesmith'),                                      //雪碧图
    bf           = require('vinyl-buffer'),                                          //流缓存
    csso         = require('gulp-csso'),                                             //css压缩
    merge        = require('merge-stream'),                                          //合并流
    babel        = require('gulp-babel'),                                            //es6转化为es5
    jshint       = require('gulp-jshint'),                                           //js语法检测
    notify       = require('gulp-notify'),                                           //消息提示
    bs           = require('browser-sync').create(),                                 //即时预览
    bs_reload    = bs.reload;                                                        //即时预览重载


/**
 * 路径变量( s => source , d => distribute , o => other project)
 */  
var current = false,                                                                 //变化路径的开关,true开启,false关闭
    o_dist = 'F://LQH/WORK/Anzipay-mall/oneyuan/',                                   //其他项目的根目录
    o_css = o_dist + 'dist/css/',                                                    //其他项目下的CSS
    o_js = o_dist + 'dist/js/',                                                      //其他项目下的JS
    o_img = o_dist + 'dist/img/',                                                    //其他项目下的IMG
    o_mod = o_dist + 'dist/mod/',                                                    //其他目录下的模块
    path = {     
        s_sass      : "webstart/build/scss/",                                              //待编译的源文件路径
        s_css       : "webstart/build/css/",
        s_js        : "webstart/build/js/",
        s_es        : "webstart/build/es6/",                                                 //待转换的ES6文件
        s_img       : "webstart/build/img/",                                                //待压缩的图片
        s_simg      : "webstart/build/img/sprite/",                                        //待合并成雪碧图的文件
        dist        : "webstart/dist/",
        d_css       : "webstart/dist/css/",                                                 //输出的文件
        d_img       : 'webstart/dist/img/',
        d_js        : 'webstart/dist/js/',
        server_root : ["webstart", "webstart/static"],
        o_dist      : o_dist,
        o_css       : o_css,                                                                //其他项目输出文件
        o_js        : o_js,
        o_img       : o_img,
        o_mod       : o_mod,
        selectPath  : function (current) {                                             //开始替换路径
            if (current) {   
                path.d_css       = path.o_css;
                path.d_img       = path.o_img;
                path.d_js        = path.o_js;
                path.d_mod       = path.o_mod;
                path.server_root = path.o_dist;                                      //本地服务器启动根目录
            }
        }
    };
path.selectPath(current);




/**
 * sass 语法检测及文件处理
 */
gulp.task('scss_2_css', function () {
    gulp.src(path.s_sass + '**/*.scss')
    .pipe(plumber({errorHandler: notify.onError("错误信息: <%= error.message %>")}))
    .pipe(sass.sync().on('error', sass.logError))
    .pipe(gulp.dest(path.s_css));
});

//脚本检查
gulp.task('lint', function () {
    gulp.src(path.d_js + '**/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
    .pipe(notify("任务成功执行!发现文件: <%= file.relative %>!"));
});


/**
 * 压缩css
 */
gulp.task('cssmin', function () { //执行完sass再执行cssmin
    return gulp.src(path.s_css + '**/*.css')
    .pipe(plumber({errorHandler: notify.onError("错误信息: <%= error.message %>")}))
    .pipe(sourcemaps.init()) //sourcemapr入口

    .pipe(autoprefixer({ //浏览器前缀
        browsers: ['last 2 versions'],
        cascade: false
    }))
    .pipe(rename({
        // dirname: "main/text/ciao",   //目录名
        // basename: "aloha",           //基本命名
        // prefix: "bonjour-",          //前缀
        suffix: ".min" //后缀
        // extname: ".md"               //拓展名
    }))
    .pipe(cssnano())
    .pipe(sourcemaps.write('.')) //保存到输出map
    .pipe(gulp.dest(path.d_css))
    .pipe(notify("任务成功执行!发现文件: <%= file.relative %>!"));
});


/**
 * 压缩js
 */
gulp.task('uglify', function () {
    return gulp.src(path.s_js + '**/*.js') //'!src/static/js/main/*js' 不压缩
    .pipe(plumber({errorHandler: notify.onError("错误信息: <%= error.message %>")}))
    .pipe(rename({
        // dirname: "main/text/ciao",   //目录名
        // basename: "aloha",           //基本命名
        // prefix: "bonjour-",          //前缀
        suffix: ".min" //后缀
        // extname: ".md"               //拓展名
    }))
    .pipe(uglify({
        mangle: true, //类型：Boolean 默认：true 是否修改变量名
        compress: true //类型：Boolean 默认：true 是否完全压缩
    }))
    .pipe(gulp.dest(path.d_js))
    .pipe(notify("任务成功执行!发现文件: <%= file.relative %>!"));
});


/**
 * 图片压缩
 */
gulp.task('imagemin', function () {
    return gulp.src(path.s_img + '*')
    .pipe(plumber({errorHandler: notify.onError("错误信息: <%= error.message %>")}))
    .pipe(imagemin({
        progressive: true,
        svgoPlugins: [{
            removeViewBox: false
        }],
        use: [pngquant()]
    }))
    .pipe(gulp.dest(path.d_img))
    .pipe(notify("任务成功执行!发现文件: <%= file.relative %>!"));
});

//雪碧图
gulp.task('sprite', function () {
    // Generate our spritesheet
    var spriteData = gulp.src(path.s_simg+'*.png').pipe(spritesmith({
        imgName: 'sprite.png',
        cssName: 'sprite.css'
    }));

    // Pipe image stream through image optimizer and onto disk
    var imgStream = spriteData.img
    // DEV: We must buffer our stream into a Buffer for `imagemin`
    .pipe(bf())
    .pipe(imagemin())           //压缩合并的图片
    .pipe(gulp.dest(path.d_img));

    // Pipe CSS stream through CSS optimizer and onto disk
    var cssStream = spriteData.css
    //.pipe(csso())       //压缩CSS
    .pipe(gulp.dest(path.d_css));

    // Return a merged stream to handle both `end` events
    return merge(imgStream, cssStream);
});

/**
 * 清空图片、样式、js
 */
gulp.task('rimraf', function () {
    return gulp.src([path.d_css + '**/*',path.d_js + '**/*'], {
        read: false
    }) // much faster
    .pipe(plumber({errorHandler: notify.onError("错误信息: <%= error.message %>")}))
    .pipe(rimraf({
        force: true
    }))
    .pipe(notify("任务成功执行!发现文件: <%= file.relative %>!"));
});

/**
 *AMD 模块压缩
 */
gulp.task('amdop', function () {
    return gulp.src(path.d_js + '**/*.js', {base: amdConfig.baseUrl})
    .pipe(plumber({errorHandler: notify.onError("错误信息: <%= error.message %>")}))
    .pipe(sourcemaps.init())
    .pipe(amdOptimize(amdConfig))
    .pipe(concat('modules.js'))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest(path.d_js))
    .pipe(notify("任务成功执行!发现文件: <%= file.relative %>!"));
});
var amdConfig = {
    baseUrl: '/oneyuan/dist/lib/',
    path: {
        jQuery         : "jquery/dist/jquery.min",
        bootstrap      : "bootstrap/dist/js/bootstrap.min",
        validation     : "jquery-validation/dist/jquery.validate.min",
        es6            : 'requirejs-babel/es6',
        babel          : 'requirejs-babel/babel-5.8.34.min',
        echarts        : 'ech arts/dist/echarts.min',
        pagin          : 'pagin',
        slider         : 'superslider/js/jquery.SuperSlide.2.1.1',
        countdown      : '../js/countdown',
        indexCountdown : '../js/indexCountdown',
        lodash         : 'lodash/lodash.core'
    },
    exclude: [
        'jQuery'
    ]
};


/**
 *本地服务器
 */
gulp.task('serve', function () {
    // 从这个项目的根目录启动服务器
    bs.init({
        server: {
            baseDir: [path.server_root+""] //本地服务器目录
        },
        port:8085
    });
    gulp.watch([path.server_root + '**/*.html', path.d_css + '**/*.css', path.s_img + '*', path.d_js + '**/*.js']).on("change", bs_reload);
});


/**
 * 默认任务 运行语句 gulp
 */
gulp.task('default', ['watch','rimraf'], function () {
    return gulp.start('scss_2_css', 'cssmin', 'uglify', 'imagemin', 'serve','sprite');
});

/**
 *  ES6 转化为ES5
 */
gulp.task('es6_2_es5', function() {
    return gulp.src(path.s_es+'**/*.js')
    .pipe(plumber({errorHandler: notify.onError("错误信息: <%= error.message %>")}))
    .pipe(sourcemaps.init())
    .pipe(babel({
        presets: ['es2015']
    }))
    //.pipe(concat('all.js'))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(path.d_js))
    .pipe(notify("任务成功执行!发现文件: <%= file.relative %>!"));
});

/**
 * 监听任务 运行语句 gulp watch
 */
gulp.task('watch', function () {

    // 监听sass
    gulp.watch(path.s_sass + '**/*.scss', ['scss_2_css']);

    // 监听css
    gulp.watch(path.s_css + '**/*.css', ['cssmin']);

    // 监听images
    gulp.watch(path.s_img + '*', ['imagemin']);

    //监听ES6 JS
    gulp.watch(path.s_es+'**/*.js',['es6_2_es5']);

    // 监听js
    gulp.watch(path.d_js + '**/*.js', ['uglify']);


});

---

结束语

• 有兴趣的小伙伴可以frok或者star一下,有完善的请提交~~~o(∩_∩)o