环境配置
安装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文件，浏览器就会自动刷新。
这次是真的配置完毕了。请先理解完这些内容。
至于更多的插件将会在其他文章中介绍。
