Gulp 是一款基于任务的设计模式的自动化工具,通过插件的配合解决全套前端解决方案,如静态页面压缩、图片压缩、JS合并、SASS同步编译并压缩CSS、服务器控制客户端同步刷新。
Gulp安装
全局安装:
$ npm install -g gulp
1. 将安装包放在 /usr/local 下
2. 可以直接在命令行里使用
局部安装:
$ npm install gulp --save-dev
1. 将安装包放在 ./node_modules 下(运行npm时所在的目录)
2. 可以通过 require() 来引入本地安装的包
一般推荐全局安装。
作为项目的开发依赖(devDependencies)安装
$ npm install --save-dev gulp
在项目根目录下创建一个名为 gulpfile.js
的文件
var gulp = require('gulp');//跟node。js相似,也是需要什么就require什么
//默认任务 gulp.task('default', function() { //这里输入默认任务的代码,function()也可以写成数组里面放需要默认执行的任务 });
运行gulp
/*全部执行(执行默认任务)*/ $ gulp /*执行指定任务*/ $ gulp 任务名
安装gulp外挂
- 编译Sass (gulp-ruby-sass)
- Autoprefixer (gulp-autoprefixer)
- 缩小化(minify)CSS (gulp-minify-css)
- JSHint (gulp-jshint)
- 拼接 (gulp-concat)
- 丑化(Uglify) (gulp-uglify)
- 图片压缩 (gulp-imagemin)
- 即时重整(LiveReload) (gulp-livereload)
- 清理档案 (gulp-clean)
- 图片快取,只有更改过得图片会进行压缩 (gulp-cache)
- 更动通知 (gulp-notify)
安装外挂:
$ npm install 外挂名
载入外挂
require(“外挂名”)
建立任务
gulp.task('任务名', function() { return gulp.src('源路径') .pipe(gulp.dest('存放的路径')) .pipe(minifycss())//压缩css文件 .pipe(gulp.dest('dist/assets/css'))//完成之后存放的位置 });
src:目标源路径
dest:完成之后存放的位置
看守
为了能够看守档案,并在更动发生后执行相关任务,首先需要建立一个新的任务,使用gulp.watch
来看守档案:
gulp.task('watch', function() { // 看守所有.css档 gulp.watch('src/*.css', ['任务名']); // 看守所有.js档 gulp.watch('src/*.js', ['任务名']); // 看守所有图片档 gulp.watch('src/*', ['任务名']); });