1.全局安装一遍:
$ npm install gulp -g
2.cd 到项目的根目录 (如果跟程序配合,程序先建好程序的话,你可找到放js和css还有images的文件夹。)我当时就在这挡住了,不知道怎么建立文件夹。
我的目录是D:\testDev\gulp
$ npm install gulp --save-dev
3.安装插件
$ npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev
- sass的编译(gulp-ruby-sass)
- 自动添加css前缀(gulp-autoprefixer)
- 压缩css(gulp-minify-css)
- js代码校验(gulp-jshint)
- 合并js文件(gulp-concat)
- 压缩js代码(gulp-uglify)
- 压缩图片(gulp-imagemin)
- 自动刷新页面(gulp-livereload)
- 图片缓存,只有图片替换了才压缩(gulp-cache)
- 更改提醒(gulp-notify)
- 清除文件(del)
4。建立gulpfile.js手动建立
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
livereload = require('gulp-livereload'),
del = require('del'); gulp.task('minifycss', function() {
return gulp.src('dev/css/*.css') //压缩的文件
.pipe(concat('main.css')) //合并文件
.pipe(minifycss())//压缩css
.pipe(gulp.dest('dist/minifyed/css/')) //输出文件夹
}); gulp.task('minifyjs', function() {
return gulp.src('dev/js/*.js')
.pipe(concat('main.js'))
.pipe(rename({suffix: '.min'})) //rename压缩后的文件名
.pipe(uglify()) //压缩
.pipe(gulp.dest('dist/minifyed/js')); //输出
}); gulp.task('clean', function(cb) {
del(['dist/minifyed/css', 'dist/minifyed/js'], cb)
}); gulp.task('default', ['clean'], function() {
gulp.start('minifycss', 'minifyjs');
});
5.运行命令
$ gulp
可以看见奇迹了。
可以单独运行,,,$ gulp minifyjs