gulpjs 构建工具
最后更新于：2022-04-02 03:41:36
[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)）
';