1. Install gulp globally:
$ npm install --global gulp
2. Install gulp in your project devDependencies:
$ npm install --save-dev gulp
3. Create a gulpfile.js at the root of your project:
var gulp = require('gulp');
gulp.task('default', function() {
// place code for your default task here
});
4. Run gulp:
$ gulp
The default task will run and do nothing.
To run individual tasks, use gulp <task> <othertask>.
在项目的根目录新建gulpfile.js，require需要的module
var gulp = require('gulp'),
minifycss = require('gulp-minify-css'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
del = require('del');
压缩css
gulp.task('minifycss', function() {
return gulp.src('src/*.css') //压缩的文件
.pipe(gulp.dest('minified/css')) //输出文件夹
.pipe(minifycss()); //执行压缩
});
压缩js
gulp.task('minifyjs', function() {
return gulp.src('src/*.js')
.pipe(concat('main.js')) //合并所有js到main.js
.pipe(gulp.dest('minified/js')) //输出main.js到文件夹
.pipe(rename({suffix: '.min'})) //rename压缩后的文件名
.pipe(uglify()) //压缩
.pipe(gulp.dest('minified/js')); //输出
});
执行压缩前，先删除文件夹里的内容
gulp.task('clean', function(cb) {
del(['minified/css', 'minified/js'], cb)
});
默认命令，在cmd中输入gulp后，执行的就是这个命令
gulp.task('default', ['clean'], function() {
gulp.start('minifycss', 'minifyjs');
});