码迷,mamicode.com
首页 > Web开发 > 详细

js css 压缩

时间:2017-08-01 23:06:00      阅读:279      评论:0      收藏:0      [点我收藏+]

标签:nat   styles   sage   doc   blog   trap   执行   date   mini   

合并和压缩JS、CSS文件

压缩JS,CSS文件需要引用如下组件:

gulp-minify-css: 压缩css
gulp-jshint: 检查js
gulp-uglify: 压缩js
gulp-concat: 合并文件
gulp-rename: 重命名文件
gulp-clean: 清空文件夹

gulp-notify:提示

安装组件项目目录,通过cd 进入项目的根目录,执行下边的npm安装组件

npm install  gulp-minify-css gulp-jshint gulp-uglify gulp-rename gulp-concat gulp-clean gulp-notify --save-dev

在上述 gulpfile.js 的文件里,写入:

技术分享
// 引入 gulp及组件
var gulp=require(‘gulp‘),  //gulp基础库
    minifycss=require(‘gulp-minify-css‘),   //css压缩
    concat=require(‘gulp-concat‘),   //合并文件
    uglify=require(‘gulp-uglify‘),   //js压缩
    rename=require(‘gulp-rename‘),   //文件重命名
    jshint=require(‘gulp-jshint‘),   //js检查
    notify=require(‘gulp-notify‘);   //提示

gulp.task(‘default‘,function(){
    gulp.start(‘minifycss‘,‘minifyjs‘);
});
 
//css处理
gulp.task(‘minifycss‘,function(){
   return gulp.src(‘htdocs/kunpeng/static/css/*.css‘)      //设置css
       .pipe(concat(‘order_query.css‘))      //合并css文件到"order_query"
       .pipe(gulp.dest(‘dist/styles‘))           //设置输出路径
       .pipe(rename({suffix:‘.min‘}))         //修改文件名
       .pipe(minifycss())                    //压缩文件
       .pipe(gulp.dest(‘dist/styles‘))            //输出文件目录
       .pipe(notify({message:‘css task ok‘}));   //提示成功
});

//JS处理
gulp.task(‘minifyjs‘,function(){
   return gulp.src([‘/static/js/juicer-min.js‘,‘/static/js/bootstrap.min.js‘,‘/static/js/bootstrap-datetimepicker.min.js‘,‘/static/js/order_query.js‘])  //选择合并的JS
       .pipe(concat(‘order_query.js‘))   //合并js
       .pipe(gulp.dest(‘‘dist/js‘))         //输出
       .pipe(rename({suffix:‘.min‘}))     //重命名
       .pipe(uglify())                    //压缩
       .pipe(gulp.dest(‘dist/js‘))            //输出 
       .pipe(notify({message:"js task ok"}));    //提示
});
技术分享

js css 压缩

标签:nat   styles   sage   doc   blog   trap   执行   date   mini   

原文地址:http://www.cnblogs.com/ranFengHua/p/7270740.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!