js css 壓縮

標籤：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 壓縮