一、什么是gulp
简单来说,它是一种自动化构建工具,可以帮助我们省掉很多重复的工作。类似的工具还有grunt。
二、为什么使用gulp
就说gulp有什么优点吧,如下:
- less->css
- css压缩
- 文件复制
- 服务器
- …
gulp的功能当然不只上面几种,但是这几种也是比较常见的,而gulp基本上这样的功能大都是利用插件实现的。
三、怎么用gulp?
下面就gulp的使用场景做几个小例子。
注意:使用gulp的前提是已经安装好了nodejs,没有安装的童鞋请先安装好nodejs装gulp。
// 安装gulp
npm install -global gulp
// 查看gulp是否安装好
PS E:\code\web\gulp\gulp-sample> gulp -version
[10:46:09] CLI version 3.9.1
[10:46:09] Local version 3.9.1
如果是按输入 gulp -version命令有上面的显示,那么说明已经安装成功,至于版本可能不同。
OK、现在就可以利用gulp命令来下载插件进行开发了。
eg1:hello gulp
var gulp = require('gulp');
gulp.task('hello', function() {
console.log('hello');
});
输入命令: gulp hello。即可执行成功,这里的gulp后面的那个参数即使task任务的第一个参数名。
eg2:less->css
// 输入命令,安装less插件
npm install gulp-less
// 引入less
var less = require('gulp-less');
// 将less自动化编译成less
gulp.task('style',function(){
gulp.src('src/styles/demo.less')
.pipe(less())
.pipe(gulp.dest('dist/css/'));
})
上面的文件路径自行创建即可,这里的每个pipe()就代表了一个操作,而pipe在linux中也有,名为管道。
这样就完成了将一个less文件转换成css标准的文件,当然没有压缩,如果想要压缩,引入相应的模块,再加一个pipe即可。完成了代码的输入之后,我们现在就需要来执行这个任务了。
输入命令: gulp style。即可执行成功,这里的gulp后面的那个参数即使task任务的第一个参数名。
四、总结
gulp的工作流
- 命令行创建npm的配置文件
- npm init
- 添加一个gulp的依赖:npm install gulp –save-dev
- 在项目根目录下添加一个gulpfile.js文件,这个是gulp的主文件,这个文件名是固定的
- 在gulpfile中抽象我们需要做的任务
gulp总的来说帮组开发者节省了不少重复的事,让开发者更多的集中在代码的书写上,而不是在工具的调试上!
另外,若是需要源代码的童鞋请留言,因为比较简单就没上传了~~~