[TOC] > [官网](https://gulpjs.com/) > [插件](https://gulpjs.com/plugins/) ## 开始 准备工作 `npm install --global gulp-cli ` 初始化项目 ``` npx mkdirp my-project cd my-project npm init npm install --save-dev gulp ``` ## 测试 安装成功 创建`gulpfile.js` ``` function defaultTask(cb) { // place code for your default task here cb(); } exports.default = defaultTask ``` 执行`gulp` ### 示例 ### 编译sass、自动添加css前缀和压缩 1. 安装插件 ` npm install gulp-sass gulp-autoprefixer gulp-minify-css gulp-notify gulp-rename --save-dev ` 方式一: 配置gulpfile.js ``` var gulp = require('gulp'), sass = require('gulp-sass'), autoprefixer = require('gulp-autoprefixer'), minifycss = require('gulp-minify-css'), rename = require('gulp-rename'), notify = require('gulp-notify'); gulp.task('styles', function() { return gulp.src('*.scss') //src 的参数可以是数组[main.scss, vender.scss],也可以是正则 /**/*.scss .pipe(sass()) .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4')) .pipe(gulp.dest('dist/assets/css')) .pipe(rename({suffix: '.min'})) .pipe(minifycss()) .pipe(gulp.dest('dist/assets/css')) .pipe(notify({ message: 'Styles task complete' })); }); ``` 执行 `gulp styles` 方式二 ``` const {src,dest} = require('gulp'), sass = require('gulp-sass'), autoprefixer = require('gulp-autoprefixer'), minifycss = require('gulp-minify-css'), rename = require('gulp-rename'), notify = require('gulp-notify'); function style(){ return src('src/*.scss') //src 的参数可以是数组[main.scss, vender.scss],也可以是正则 /**/*.scss .pipe(sass()) .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4')) .pipe(dest('dist/assets/css')) .pipe(rename({suffix: '.min'})) .pipe(minifycss()) .pipe(dest('dist/assets/css')) .pipe(notify({ message: 'Styles task complete' })); } // exports.default = style //执行 gulp exports.style = style ``` ### 监听 css等变化 ``` const {watch} = require('gulp'), function style(){ // code } function Watch(){ watch('src/*.scss', style); //触发style 函数 } exports.watch = Watch ``` 执行 `gulp watch` ### 监听 文件变化,刷新页面 `npm install gulp-livereload` ``` const livereload = require("gulp-livereload"); function Watch(){ watch('src/*.scss', style); //监听文件变动 livereload.listen(); gulp.watch(['dist/**']).on('change', livereload.changed); } exports.watch = Watch ``` 执行`gulp watch` ## 常用插件 * sass的编译([gulp-ruby-sass](https://github.com/sindresorhus/gulp-ruby-sass)) * 自动添加css前缀([gulp-autoprefixer](https://github.com/Metrime/gulp-autoprefixer)) * 压缩css([gulp-minify-css](https://github.com/jonathanepollack/gulp-minify-css)) * js代码校验([gulp-jshint](https://github.com/spenceralger/gulp-jshint)) * 合并js文件([gulp-concat](https://github.com/wearefractal/gulp-concat)) * 压缩js代码([gulp-uglify](https://github.com/terinjokes/gulp-uglify)) * 压缩图片([gulp-imagemin](https://github.com/sindresorhus/gulp-imagemin)) * 自动刷新页面([gulp-livereload](https://github.com/vohof/gulp-livereload)) * 图片缓存,只有图片替换了才压缩([gulp-cache](https://github.com/jgable/gulp-cache)) * 更改提醒([gulp-notify](https://github.com/mikaelbr/gulp-notify)) * 清除文件([del](https://www.npmjs.org/package/del))