使用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']);