关于gulp的压缩js和css

Posted 2021-02-14 *朝晖

npm install --global gulp

npm install gulp --save-dev

在项目根目录下创建一个名为 gulpfile.js 的文件

var gulp = require(\'gulp\');

gulp.task(\'default\', function() {
  // 将你的默认的任务代码放在这
});

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

// 引入 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"}));    //提示
});

注意：使用gulp3版本可用

gulp.task(\'default\',[\'minifycss\',\'minifyjs\']);

转载地址 https://www.cnblogs.com/liangdaye/p/4956284.html