Gulp
是前端开发过程中对代码的自动化构建工具,它不仅能对各种资源进行优化,还能对我们开发过程中的各种任务进行自动化完成。
Gulp
是基于nodeJs运行的,他能自动完成js、sass、less、html、image、css
等文件的测试、检查、合并、压缩、格式化、浏览器自动更新等。在实现上它借鉴了Unix操作系统的pipe
管道思想,也就是前一级的输处变为后一级的输入,使得在操作上变得很是方便,从而加快开发流程。
下面我们来直接上手入门一下吧~
首先我们需要先安装node
,另外我还使用了cnpm
,在这里我就不对这些做介绍了(因为我们需要使用npm
来安装我们今天的主角gulp
)
- 首先打开gulp的英文官网,你会看到这样简单的几句命令,我们先从这几句代码来写起
第一步
win + r
打开命令行工具
全局安装 gulp-cli
$ npm install gulp-cli -g
第二步
// 创建一个文件夹
// npm 初始化一下
$ npm init -y
// 安装gulp
$ cnpm install gulp -D
第三步
构建目录结构
| node_modules
| src
| css
- index.scss
- veriable.scss
| gulpfile.js
| package.json
第四步
编写文件内容
// veriable.scss
$color: #fff;
// index.scss
@import './veriable';
body{
background: $color;
}
第五步
安装插件
// 安装处理sass的插件
$ cnpm install gulp-sass -D
第六步
使用插件
// gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
return gulp.src('./src/css/index.scss')
.pipe(sass())
.pipe(gulp.dest('./css'));
});
第七步
运行测试
$ gulp sass
PS D:\myweb\gulp\demo2> gulp sass
[14:14:46] Using gulpfile D:\myweb\gulp\demo2\gulpfile.js
[14:14:46] Starting 'sass'...
[14:14:46] Finished 'sass' after 22 ms
PS D:\myweb\gulp\demo2>
然后你就会在目录下看到有dist目录生成了。
好了,我们今天的第一个小实例就结束了!未完待续~~
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。