關於gulp的壓縮js和css

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