使用gulp进行css、js压缩

var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');
var concatCss = require('gulp-concat-css');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var del = require('del');
var gutil = require('gulp-util');

//压缩的临时文件保存到storage, gitignore这些文件
var clean_css_path = 'storage/gulp/clean_css';  //压缩css文件保存路径
var target_css_path = 'public/gulp/css';        //最终生成的最小化css文件保存路径
var clean_js_path = 'storage/gulp/clean_js';    //压缩js文件保存路径
var target_js_path = 'public/gulp/js';          //最终生成的最小化js文件保存路径

//为数组每一个元素加上前缀并返回修改后的数组
//这个前缀是相对于项目根目录的目录前缀
Array.prototype.add_prefix = function (prefix) {
    return this.map(function (path) {
        return prefix + path;
    });
};

//需要合并压缩的css
var css_to_clean = [
    'js/jquery-ui/css/no-theme/jquery-ui-1.10.3.custom.min.css',
    'css/font-icons/entypo/css/entypo.css',
    'css/bootstrap.css',
    'css/neon-core.css',
    'css/neon-theme.css',
    'css/neon-forms.css',
    'css/custom.css',
    'js/datatables/datatables.min.css',
    'js/dropzone/dropzone.css'
    ].add_prefix('public/static/neon-res/')
     .concat([
            'fancybox/jquery.fancybox.css',
            'fancybox/helpers/jquery.fancybox-buttons.css',
            'fancybox/helpers/jquery.fancybox-thumbs.css'
     ].add_prefix('public/static/'))
    .concat('public/admin/css/neon_common.css');//自定义的css

//需要合并压缩的js
var js_to_clean = [
    //登录界面才有的js
    //下面合并js使用slice(2)去掉
    'jquery.validate.min.js',
    'neon-login.js',

    'jquery-1.11.3.min.js',
    'gsap/TweenMax.min.js',
    'jquery-ui/js/jquery-ui-1.10.3.minimal.min.js',

    'bootstrap.js',
    'joinable.js',
    'resizeable.js',
    'neon-api.js',

    'fileinput.js',
    'dropzone.js',
    'neon-chat.js',
    'neon-custom.js',
    'neon-demo.js'
    ].add_prefix('public/static/neon-res/js/')
    .concat([
        //自定义的js
        'public/admin/js/common.js',
        'public/admin/js/kollway_ot.js'
    ])
    .concat([
        'public/static/uploadify/jquery.uploadify.min.js',
        'public/static/H5FileUploader.js'
    ])
    .concat([
        'jquery.fancybox.pack.js',
        'helpers/jquery.fancybox-buttons.js',
        'helpers/jquery.fancybox-thumbs.js'
    ].add_prefix('public/static/fancybox/'));

//压缩全部css, 直接全部合并之后好像漏掉一些css, 先压缩再合并
gulp.task('clean-css', function () {
   return gulp.src(css_to_clean)
       .pipe(cleanCSS())
       .pipe(gulp.dest(clean_css_path));
});

var clean_css_callback = function () {
    var temp_array = css_to_clean.map(function (path) {
        //只获取文件名
        return clean_css_path + '/' + path.split('/').pop();
    });
    return gulp.src(temp_array)
        .pipe(concatCss('all.min.css', {basedir: target_css_path}))
        .pipe(cleanCSS())
        .pipe(gulp.dest(target_css_path));
};
gulp.task('css', ['clean-css'], clean_css_callback);

//js
//压缩所有js
gulp.task('clean-js', function () {
    return gulp.src(js_to_clean)
        .pipe(uglify())
        .pipe(gulp.dest(clean_js_path));
});

var clean_js_callback = function () {
    //slice(2), 去掉登录界面的两个
    var temp_array = js_to_clean.slice(2).map(function (path) {
        return clean_js_path + '/' + path.split('/').pop();
    });
    return gulp.src(temp_array)
        .pipe(concat('all.min.js', {basedir: target_js_path}))
        .pipe(gulp.dest(target_js_path));
};
gulp.task('js', ['clean-js'], clean_js_callback);

//清理临时文件, 需要的话清除, 使用gulp clean命令
gulp.task('clean', function () {
   del([
       clean_css_path + '/' + '*.css',
       clean_js_path + '/' + '*.js'
   ]);
});

//合并登陆页所需css
gulp.task('merge-login-css', ['clean-css'], function () {
    return gulp.src([
        'jquery-ui-1.10.3.custom.min.css',
        'entypo.css',
        'bootstrap.css',

        'neon-core.css',
        'neon-theme.css',
        'neon-forms.css',
        'custom.css'
    ].map(function (path) {
        return clean_css_path + '/' + path;
    })).pipe(concatCss('login.min.css'), {basedir: target_css_path})
        .pipe(cleanCSS())
        .pipe(gulp.dest(target_css_path))
});

//合并登陆页所需js
gulp.task('merge-login-js', ['clean-js'], function () {
    return gulp.src([
        'jquery-1.11.3.min.js',
        'TweenMax.min.js',
        'jquery-ui-1.10.3.minimal.min.js',

        'bootstrap.js',
        'joinable.js',
        'resizeable.js',
        'neon-api.js',

        'jquery.validate.min.js',
        'neon-login.js',
        'neon-custom.js',
        'neon-demo.js'
    ].map(function (path) {
        return clean_js_path + '/' + path
    }))
        .pipe(concat('login.min.js', {basedir: target_js_path}))
        .pipe(gulp.dest(target_js_path));
});

//登录页面的css、js和base的不一样, 独立生成, 先清除缓存文件
//一般不需要更改
gulp.task('login', ['merge-login-css', 'merge-login-js']);

//如果只是改变自定义的css、js, 只压缩自定义的css、js
//前提是之前已经压缩过其他文件, 并且没有删除
//压缩自定义css
gulp.task('clean-custom-css', function () {
    return gulp.src('public/admin/css/neon_common.css')
        .pipe(cleanCSS())
        .pipe(gulp.dest(clean_css_path));
});
//压缩自定义js
gulp.task('clean-custom-js', function () {
    return gulp.src([
        'public/admin/js/common.js',
        'public/admin/js/kollway_ot.js'
    ]).pipe(uglify()).pipe(gulp.dest(clean_js_path));
});

//如果之前已经用过gulp生成所有中间压缩文件
//修改了自定义的几个文件之后可以直接使用gulp custom利用缓存文件生成新的压缩文件
gulp.task('cache-clean-css', ['clean-custom-css'], clean_css_callback);
gulp.task('cache-clean-js', ['clean-custom-js'], clean_js_callback);
gulp.task('custom', ['cache-clean-css', 'cache-clean-js']);

gulp.task('default', ['css', 'js']);