一步一步教你构建gulp，前端大白都能看懂。。。以下是具体步骤：
1.打开终端 mkdir创建一个项目目录one (不能叫gulp)

mkdir one

2.通过终端cd 命令进入 该项目目录

cd one

3.执行npm init命令 初始化该目录，并生成package.json文件
（此处需要一直按回车）直到生成package.json

npm init

如图

E24105FD-CE57-4190-B0D5-750E955C2466.png

以下几项是安装几个平常所需要的插件

--save-dev 是你开发时候依赖的东西，它会自动把你安装的插件的版本号信息写到你的json文件中,在安装是如果报错是权限不足时，在命令语句钱加sudo,表示使用管理员身份运行就如windows系统里的administrater,命令如下：
4.安装gulp,生成node_modules文件夹

npm install gulp --save-dev

2.png

5.安装less插件

npm install gulp-less --save-dev

6.�安装pug插件

npm install gulp-pug --save-dev

7.安装出错不中断监控插件

npm install gulp-plumber --save-dev

8.安装css压缩插件

npm install gulp-clean-css --save-dev

当前目录下会生成node_moudles 检查有没有上面安装的插件，并检查
package.json文件里有没有这些插件的信息，保存成功没有，里面有安装的插件名称和对应的版本号。

4.png

9.通过touch.js命令 生成创建gulpfile.js

touch gulpfile.js

10.通过mkdir 创建pug目录

mkdir pug

11.通过mkdir 创建less目录

mkdir

12.编辑 gulpfile.js,注意lass和pug文件的位置写对应的路径

部分代码的语义：

gulp.task("任务名称",function(){
要做的事情
})
gulp.src("文件的路径，相对的")
pipe("管道，输出到下一步")
gulp.dest("文件输出的路径，相对的")
gulp.watch("你监控的文件路径，相对的",["任务名称1","任务名称2"])

主要任务的逻辑

以1hao任务为例：

1. 找到pug文件
2. 编译pug文件成html
3. 把html放在另外一个目录下

// 引入gulp
var gulp = require("gulp");
// 引入pug插件
var pug = require("gulp-pug");
// 引入less插件
var less = require("gulp-less");
// 引入plumber出错不中断监控插件
var plumber = require("gulp-plumber");
// 引入clean-css css压缩插件
var cleanCss = require("gulp-clean-css");

// gulp.task定义任务
gulp.task("1hao",function(){
    // gulp.src 文件位置
    gulp.src("pug/*.pug")
        .pipe(plumber())
        .pipe(pug())//pug -> html
        .pipe(gulp.dest("html/"));
})
gulp.task("2hao",function(){
    gulp.src("less/*.less")
        .pipe(plumber())
        .pipe(less())//less -> css
        .pipe(cleanCss())
        .pipe(gulp.dest("css/"))
})
gulp.task("3hao",function(){
    gulp.watch("pug/*.pug",["1hao"])
    gulp.watch("less/*.less",["2hao"])
})

进行到这一步，整个工具已经生成。

5.png

下次你要写项目时直接拿来用，在终端运行gulp,并调用对应的任务便可愉快的编写代码了，是不是特别方便呀~~~~