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
关于gulp的压缩js和css
原文地址：https://www.cnblogs.com/yihuite-zch/p/10482563.html