Gulp的简单实用

1、首页全局安装gulp

npm install --global gulp

2、其次局部安装gulp

npm install gulp --save-dev

3、安装依赖

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

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

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('css/*.css')      //设置css
       .pipe(concat('order_query.css'))      //合并css文件到"order_query"
       .pipe(gulp.dest('css/'))           //设置输出路径
       .pipe(rename({suffix:'.min'}))         //修改文件名
       .pipe(minifycss())                    //压缩文件
       .pipe(gulp.dest('css/'))            //输出文件目录
       .pipe(notify({message:'css task ok'}));   //提示成功
});

//JS处理
gulp.task('minifyjs',function(){
   return gulp.src(['js/amazeui.js','js/app.js'])  //选择合并的JS
       .pipe(concat('order_query.js'))   //合并js
       .pipe(gulp.dest('js/'))         //输出
       .pipe(rename({suffix:'.min'}))     //重命名
       .pipe(uglify())                    //压缩
       .pipe(gulp.dest('js/'))            //输出 
       .pipe(notify({message:"js task ok"}));    //提示
});

5、运行命令

gulp