gulp入门详解之基本操作

本文主要是介绍gulp入门详解之基本操作，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章结构

本文分为两部分：

gulp 入门
gulp 常用插件

gulp入门

简单介绍

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

这里写图片描述
对应项目的下载地址：点击下载

运行环境

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

安装gulp环境

npm install gulp -g

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

开发流程

创建 package.json
创建并编写 gulpfile.js
命令行执行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'])