环境配置

安装NodeJS

安装成功后，确认npm是否可用

npm -v

初始化npm环境

npm init -y

全局安装gulp

npm i -g gulp

新建Gulpfile.js

在项目根目录新建Gulpfile.js，此文件相当于gulp的配置文件

至此，项目中就有了这两个文件，那么准备工作目前就完成了

Gulpfile.js

目前为止，这个文件内还是空的，按照项目需求逐步添加插件

gulp

npm i gulp --save-dev

安装项目依赖，刚才是全局安装，是不一样的。这步不能省略。
安装成功后在Gulpfile.js添加gulp引用，并且添加默认任务

const gulp = require('gulp');
gulp.task('default', []);

现在终端中输入gulp回车，就能看到gulp的运行结果

gulp-connect

npm i gulp-connect --save-dev

这个插件用于架设本地服务器，不用繁琐的去配置nginx，非常方便

const gulp = require('gulp');
const connect = require('gulp-connect');
gulp.task('server', () => {
    connect.server({
        host: 'localhost',   // 域名
        port: '8080',   // 端口
        livereload: true   // 自动刷新，需要在chrome中安装livereload插件配合
    });
});
gulp.task('default', ['server']);

更新Gulpfile.js配置文件，并且在项目中新建index.html
在终端中运行gulp

浏览器中访问http://localhost:8000

gulp-less

使用gulp-less可以自动编译.less文件生成为.css文件

npm i less -g
npm i gulp-less --save-dev

插件安装好之后，修改配置文件

const gulp = require('gulp');
const connect = require('gulp-connect');
const less = require('gulp-less');
gulp.task('server', () => {
    connect.server({
        host: 'localhost',
        port: '8000',
        livereload: true
    });
});
gulp.task('less', () => {
    gulp.src('./src/less/core.less')
        .pipe(less())
        .pipe(gulp.dest('./dist/css'))
});
gulp.task('default', ['server', 'less']);

配置里增加了less这个任务的构建
gulp.src是定义操作文件的入口
.pipe排列了执行的任务队列
.gulp.dest将文件输出到目标文件夹
我们回头去按照gulp.src定义的入口去新建这个文件

并且在文件中添加一些代码

@colorBackground: #F2F2F2;
body {
    background: @colorBackground;
}

在终端中重新运行

gulp

之后可以看到在项目根目录出现了一个dist文件夹，这个css文件就是最终生成的文件，而我们要在index.html中引用它

<link rel="stylesheet" href="dist/css/core.css">

刷新页面后会发现页面背景已经被改变
但是这样做明显不是有效的开发方式，每次都要重新运行gulp
所以我们需要用到gulp.watch

const gulp = require('gulp');
const connect = require('gulp-connect');
const less = require('gulp-less');
gulp.task('server', () => {
    connect.server({
        host: 'localhost',
        port: '8000',
        livereload: true
    });
});
gulp.task('less', () => {
    gulp.src('./src/less/core.less')
        .pipe(less())
        .pipe(gulp.dest('./dist/css'))
                
});
gulp.task('watch', () => {
    gulp.watch('./src/**/*.less', ['less']);
});
gulp.task('default', ['server', 'less', 'watch']);

更新一下配置文件，增加了watch任务的构建，接着重新运行一次gulp

找到core.less文件，修改一下内容，保存修改，回到浏览器刷新页面。

@colorBackground: #F2F2F2;
@colorRed: #FF0000;
body {
    color: @colorRed; background: @colorBackground;
}

这时候文件经过保存操作已经被自动编译。

但是目前的问题还有一个，就是项目中不止有一个less文件。

接下来在/src/less/目录中新建两个文件define.less和reset.less
define.less

@colorBackground: #F2F2F2;
@colorRed: #FFFF00;

reset.less

* { padding: 0; margin: 0;}
body {
    color: @colorRed; background: @colorBackground;
}

core.less

@import url('define.less');
@import url('reset.less');

如果你发现修改之后，没有效果，检查你的终端，gulp是否报错，报错就重新运行
修改完毕之后，会发现/dist/css/core.css文件中把内容已经自动合并了。

gulp-concat 和 gulp-uglify

然而JS文件的合并与压缩，就需要用到另外一个插件

npm i gulp-concat gulp-uglify --save-dev

在配置文件中引用

const concat = require('gulp-concat');
const uglify = require('gulp-uglify');

构建js任务

gulp.task('js', () => {
    gulp.src(['./src/js/a.js', './src/js/b.js'])
        .pipe(concat('main.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dist/js'))
});

更新watch任务，加入js的监听

gulp.task('watch', () => {
    gulp.watch('./src/**/*.less', ['less']);
    gulp.watch('./src/**/*.js', ['js']);
});

将js任务添加到默认队列中

gulp.task('default', ['server', 'less', 'js', 'watch']);

之后去项目目录/src/js/中添加a.js和b.js
a.js

function runa() {
    alert('a');
}

b.js

runa();

重新运行gulp，找到/dist/js/目录，找到合并压缩后的main.js，在index.html引用

至此，一个简易的自动化工程就配置完毕
哦不对，还有前面gulp-connect中的livereload。。。
这个功能可以使watch监听到文件修改自动编译后，通知浏览器自动刷新，当然要使用Chrome并且安装livereload插件Chrome商店
我们来修改一下Gulpfile.js

const gulp = require('gulp');
const connect = require('gulp-connect');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const less = require('gulp-less');
gulp.task('server', () => {
    connect.server({
        host: 'localhost',
        port: '8000',
        livereload: true
    });
});
gulp.task('less', () => {
    gulp.src('./src/less/core.less')
        .pipe(less())
        .pipe(gulp.dest('./dist/css'))
        .pipe(connect.reload())
});
gulp.task('js', () => {
    gulp.src(['./src/js/a.js', './src/js/b.js'])
        .pipe(concat('main.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dist/js'))
        .pipe(connect.reload())
});
gulp.task('watch', () => {
    gulp.watch('./src/**/*.less', ['less']);
    gulp.watch('./src/**/*.js', ['js']);
});
gulp.task('default', ['server', 'less', 'js', 'watch']);

重新运行gulp，并且在Chrome扩展栏中找到一个图标

中间的实心小圆点是处于监听状态，空心的则是无效的

接下来修改一下你的src目录中，那些.less和.js文件，浏览器就会自动刷新。

---

这次是真的配置完毕了。请先理解完这些内容。
至于更多的插件将会在其他文章中介绍。