之前一直听说gulp是自动构建工具,能够自动完成一些重复的任务,提高工作效率。当开始接触到sass才进一步了解它的强大。
什么是gulp?
gulp时基于Nodejs的自动任务运行器,她能自动化地完成JavaScript、cofee、Sass、Less、HTML、image、CSS等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的步骤。在实现上,她借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,使得在操作上非常简单。
gulp的使用
gulp大致可以分为几个步骤:
安装nodejs
全局安装gulp
项目安装gulp以及gulp插件
配置gulpfile.js
运行任务
安装nodejs
安装nodejs
全局安装gulp
说明:全局安装gulp目的是为了通过她执行gulp任务;
安装:命令提示符执行npm install gulp -g;
查看是否正确安装:命令提示符执行gulp -v,出现版本号即为正确安装。
新建package.json
在项目下,可以通过命令创建npm init
package.json是基于nodejs项目必不可少的配置文件,它是存放在项目根目录的普通json文件,不能添加任何注释。。
cnpm是淘宝提供的一个完整的npm.org镜像
项目安装gulp以及gulp插件
在自己的项目下面运行
npm install --save-dev <name>
安装对应的插件。-
这里以gulp-sass为例
#本地安装gulp #全局安装gulp是为了执行gulp任务,本地安装gulp则是为了调用gulp插件的功能。 npm install --save-dev gulp #在项目目录下运行 npm install --save-dev gulp-sass
新建gulpfile.js文件
说明:gulpfile.js是gulp项目的配置文件,是位于项目根目录的普通js文件(其实将gulpfile.js放入其他文件夹下亦可)。
'use strict';
//导入工具包 require('node_modules里对应模块')
var gulp = require('gulp');//本地安装gulp所用到的地方
var sass = require('gulp-sass');
//定义一个sass任务
gulp.task('sass', function () {
return gulp.src('./sass/**/*.scss')//任务针对的文件
.pipe(sass().on('error', sass.logError))//任务调用的模块
.pipe(gulp.dest('./css'));//生成路径
});
//默认执行
gulp.test('default',['sass'])
//监听任务
gulp.task('sass:watch', function () {
gulp.watch('./sass/**/*.scss', ['sass']);
});
在项目下创建gulpfile.js文件,相关API可以点击查看 gulp API gulp sass
在node_modules的gulp-sass目录下,有一个gulp-sass的使用帮助文档README.md;
运行gulp
命令提示符执行gulp 任务名称
;
执行gulp sass
或者gulp default
都将编译sass,后者在可加入更多的任务。
执行gulp sass:watch
将监听任务文件,当其改变时自动完成编译。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。