1.要在node环境下
2.
全局安装npm install gulp -g
项目中安装npm install gulp --save-dev
3.安装插件
- 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)
var gulp = require(‘gulp‘), minifycss = require(‘gulp-minify-css‘), concat = require(‘gulp-concat‘), uglify = require(‘gulp-uglify‘), rename = require(‘gulp-rename‘), del = require(‘del‘); gulp.task(‘minifycss‘, function() { return gulp.src(‘css/*.css‘) //压缩的文件 .pipe(concat(‘main.css‘)) .pipe(minifycss()) //执行压缩 .pipe(gulp.dest(‘minified/css‘)) ; //输出文件夹 }); gulp.task(‘minifyjs‘, function() { return gulp.src(‘js/*.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) }); gulp.task(‘default‘,function() { gulp.start(‘minifycss‘, ‘minifyjs‘); });
在cmd中运行gulp即可。
- 更改提醒(gulp-notify)
- 清除文件(del)
安装这些插件需要运行如下命令:
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
4.在项目根目录创建gulpfile.js
时间: 2024-10-14 21:52:19