gulp入门详解之基本操作

文章结构

---

本文分为两部分：

1. gulp 入门
2. gulp 常用插件

gulp入门

---

简单介绍

首先来简单看一个gulp的工作流程
工作流的目的是：将less转换成为一个对应的css文件。

对应项目的下载地址：点击下载

运行环境

1. node (本文的版本是v6.9.5)
2. 包管理：npm(或者cnpm) 不了解的同学可以参考一下：链接内容

安装gulp环境

npm install gulp -g 

全局安装gulp,安装完成之后，可以通过 gulp -v 指令查看当前版本(v3.9.1)

开发流程

1. 创建 package.json
2. 创建并编写 gulpfile.js
3. 命令行执行gulp

创建 package.json
通过我们之前配置好的npm，我们执行npm install来创建一个package.json文件。文件格式如下：

{
  "name": "gulp", // 包名称
  "version": "1.0.0", // 版本号
  "description": "", // 文件描述
  "main": "gulpfile.js", // 入口文件
  "dependencies": { // !!! 文件的依赖，当前为空
  },
  "devDependencies": {}, // 开发版本依赖
  "scripts": { // 
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "", // 
  "license": "ISC" // 
}

我们可以看到，当前项目的依赖包（dependencies）列表为空。
本例我们需要做一个less=>css的转换，因此需要使用gulp以及gulp-less这两个插件包。
在命令行中，执行npm install gulp-less，我们再去看看dependencies依赖项目中会多了一个新包。

"dependencies": {
   "gulp": "^3.9.1"
 },

创建并编写 gulpfile.js

新建一个gulpfile文件，作为自动化项目构建任务。

./src/index.less

@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}

./gulpfile.js

let gulp = require('gulp')
let less = require('gulp-less')

// 自定义任务
gulp.task('testless',function(){
    gulp.src('src/index.less') // 匹配特定文件
    // gulp.src('src/*.less') //  匹配固定目录下.less文件
    // gulp.src('./src/**/*.less') // 匹配固定目录下，所有子文件夹下的.less文件
    // gulp.src('./src/**/{index,other.index}.less') // 匹配固定目录下，特定文件名的.less
        .pipe(less())
        .pipe(gulp.dest('src/css'))
})
// 执行任务
gulp.task('default',['testless'])

命令行执行gulp

在命令行中执行gulp或gulp-less这两种指令。
最后可以看到,新增加了./src/css/文件夹