Gulp 入门
安装
- 全局安装 gulp:
npm install gulp --global // --global 代表全局
```
- 3. 开发依赖安装:进入项目的根目录执行命令 (在项目的根目录里创建一个package.json)
````js
npm install gulp --save-dev
// --save将保存配置信息至package.json -dav 保存至package.json的devDependencies节点
- 在 package.json 同级目录下创建一个名为 gulpfile.js 的文件:
var gulp = require('gulp');
gulp.task('default',function(){ //gulp 默认会执行的任务
// do something
});
- 运行 gulp:
gulp
Gulp API
gulp 的 API 非常简单
gulp.src('匹配模式或者匹配模式数组',['参数']) //匹配模式 类似正则表达式
.pipe(functionName()) // 获取操作后的文件流,传递给括号里面的函数
gulp.dest('path',['options']); // 将上一步操作后的文件输出到 path 路径里
gulp.task('任务的名称',function(){
// dosomething
// for example :
gulp.start(['任务名称1,任务名称2']);
});
gulp.watch('监听对象',['任务1']);
// 监听对象:1、匹配模式; 2、任务名称
// 任务1:在监听对象发生变化后需要执行的任务
编译SASS Demo ,前提是已经安装了 gulp-sass 插件(基于 Ruby编译)
var gulp = require('gulp'),
gsass = require('gulp-sass');
gulp.task('default', function() {
gulp.start(['scss']);
});
gulp.task("scss",function(){
gulp.src('scss/*.scss')
.pipe(gsass()) //执行编译
.pipe(gulp.dest('css')) ;
});
这里只是简单介绍了一下他的API,更详细的API请点解这里中文,这里英文
Gulp 常用插件列表
Gulp 有着非常丰富的插件库,在他的官网里可以直接查询或者是到github 查找,如果都没有,没关系还可以自己开发一个。这里就不重复了,别人有现成的。
网友评论