Gulp 第一篇 入门

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目录生成了。

好了，我们今天的第一个小实例就结束了！

未完待续~~