1.简介
前端的自动化构建工具，目前用的比较多的大概有webpack, grunt, gulp。
gulp，用自动化构建工具增强你的工作流程；
官方介绍gulp将开发流程中让人痛苦或耗时的任务自动化，从而减少你所浪费的时间、创造更大价值。简而言之，是一个自动化构建工具，主要用来设定程序自动处理静态资源的工作。他的特点就是简单，高效。这篇文章呢，主要是创建一个简单的gulp配置项目，来让我们简单地了解gulp。
2.创建项目文件夹目录
首先，我们创建一个名为gulp-demo的文件夹来作为我们的项目文件夹，
然后使用
npm init
来初始化我们的项目，项目配置这里就不介绍了；
之后在我们的项目文件夹下分别创建css, js文件夹再创建一个index.html，大概项目文件如下图：
image.png
3.下载gulp，并简单的配置gulpfile.js
下载gulp可以gulp官网或者github查看如何下载，我们这里就直接用yarn下载，当然，npm也是可行的。
yarn add gulp -D
下载好之后，我们在当前项目文件夹下创建一个名为gulpfile.js的文件，这个文件会在执行gulp命令的时候被自动加载。关于gulpfile.js的详细介绍，可查看官网说明，简而言之，就是我们可以适用js相关的语法来书写gulpfile.js。
接下来，我们简单地书写gulpfile.js如下：
const {
series
} = require('gulp')
function js(){
console.log("I am js task");
}
function css(){
console.log("I am css task");
}
function html(){
console.log("I am html task");
}
function clean(){
console.log("I am clean task");
}
exports.scripts = js;
exports.clean = clean;
exports.styles = css;
exports.default = series([
clean,
js,
css,
html
])
可以看到我们分别定义了四个方法并把它们分别export，和一起作为defalut export了出去；
而我们引入的series，是个把任务串行执行的gulp方法；
那我们在命令行输入如下的命令，看看会发生什么效果：
npx gulp scripts
image.png
他这里虽然执行了我们的js方法，打印了我们的输出，但是下面两行提示提示我们少了什么东西。原来每执行完一个任务你得告诉gulp，你执行完了。所以代码修改如下：
const {
series
} = require('gulp')
function js(cb){
console.log("I am js task");
cb();
}
function css(cb){
console.log("I am css task");
cb()
}
function html(cb){
console.log("I am html task");
cb()
}
function clean(cb){
console.log("I am clean task");
cb()
}
exports.scripts = js;
exports.clean = clean;
exports.styles = css;
exports.default = series([
clean,
js,
css,
html
])
传入的参数cb函数就相当于是用来告诉gulp的，再来执行npx gulp scripts, 显示如下：
image.png
接下来可以自行执行下，npx gulp clean, npx gulp styles, npx gulp, 分别查看命令行的显示结果是什么样的。
3.修改项目文件
在css文件夹中创建inde.scss文件如下：
$color:red;
body {
text-align: center;
background: $color;
}
在js文件夹中创建inde.js文件如下：
console.log('测试一下嘛');
console.log('测试一下嘛');
console.log('测试一下嘛');
4.打包函数的配置
-
通过上面的操作，我们应该可以理解了，原来我们在gulifie.js中定义的方法，可以当我们执行gulp命令时，分别执行我们的方法，如果在方法中加上对文件的输出，编译，删除等操作，就可以实现对项目文件的打包了
-
我们在命令行中输入如下命令，分别下载gulp-sass, gulp-autoprefixer, gulp-load-plugins, gulp-uglify, del 插件，至于插件的用处，我们之后再说
yarn add gulp-sass gulp-autoprefixer gulp-load-plugins gulp-uglify del -D
- 然后我们来对js的方法进行改写，改写前，我们要引入其他几个gulp的方法，和一些插件：
const {
src,
dest,
watch,
series
} = require('gulp')
const plugins = require('gulp-load-plugins')() //注意这里的括号不能少
src是查看目标文件的方法，dest方法是打包好的文件输出的方法，watch是用于热监听的，监听文件的变化（后面会用到），而我们的gulp-load-plugins就是个很神奇的插件了，具体神奇在哪里，直接看下面的代码：
function js(cb) {
src("js/*.js") //查找 js文件夹下的所有.js文件
.pipe(plugins.uglify()) //pipe调用uglify插件
.pipe(dest('./dist/js')) //pipe调用dest方法
cb();
}
这段代码就是告诉gulp, 将js目录下的所有js文件，全部丑化，输出到dist目录下的js目录。而我们的gulp-load-plugins插件就可以让我们不用引入其他的插件，直接plugins.插件名()，就可以调用插件了，是不是很方便！！！
那么改写完成了之后，我们执行npx gulp scripts, 就会发现咱们的项目文件夹会多出来一个dist目录，且下面有js录，里面也有个叫index.js的，不过它长这样：
console.log("测试一下嘛"),console.log("测试一下嘛"),console.log("测试一下嘛");
之前多余的空格就被我们的uglify插件给优化没了，js方法改造完成。
- 删除文件
每次打包前，先把之前的删除
const del = require('del')
function clean(cb){
del("./dist")
cb()
}
export.clean = clean;
在打包了js文件后，执行下 npx gulp clean 看能否删除dist文件夹
- 下面来对css方法改造
function css(cb){
src('css/*.scss')
.pipe(plugins.sass({outputStyle: 'compressed'}))
.pipe(plugins.autoprefixer({
cascade: false,
remove:false
}))
.pipe(dest('./dist/css'))
cb();
}
关于上面的gulp-autoprefixer，和gulp-sass的参数的配置，这里就不一一讲解了，大家可以自行去gulp的插件搜索这两个插件，查看他们如上配置的参数的作用。配置完成后，咱们npx gulp styles。
同上发生了类似的事情，查看我们生成的dist/css目录下的index.css，长相如下：
body{text-align:center;background:red}
已经完成了scss到我们浏览器能看懂的css！！
然后我们在index.html，引入这两个文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello gulp</title>
<link rel="stylesheet" href="./dist/css/index.css">
</head>
<body>
<h2>hello gulp</h2>
<script src="./dist/js/index.js"></script>
</body>
</html>
打开浏览器看看，其实这时候我们的简单的打包就基本完成了。
- 热监听
然后，咱们就会发现，难道我们每改一次代码，都要执行一遍命令行，然后再刷新看看效果么？那这样也太麻烦了。不要着急，gulp的watch方法可以很好的解决这个问题。
只要将我们的代码做到监听到文件发生改变时，就再次打包改文件就行了
function service(cb){
watch("css/*.scss", css) //scss文件发生改变时，调用css方法
watch("js/*.js", js) //js文件发生改变时，调用js方法
cb()
}
exports.default = series([
clean,
js,
css,
html,
service
])
watch方法就是监听到文件发生变化时，就会调用哪个任务; 执行下npx gulp， 执行完成之后，就会显示如下界面，
image.png
然后我们对css, js的文件分别作出修改
$color:blue;
body {
text-align: center;
background: $color;
}
console.log('测试一下嘛');
console.log('测试一下嘛');
console.log('测试一下嘛');
console.log('测试热加载');
这个时候可以看到命令行发生如下变化：
image.png
自动进行了打包的操作，咱们刷新一下inde.html的页面，就可以查看到发生的变化了。
- 浏览器自动刷新
什么？我改了代码居然要我刷新浏览器才能看到变化，不行！这个太麻烦了，难道就不能自动刷新浏览器么？？？
答案是肯定能的啊！！！还记得那个clean,和html吗，一直没被动过的方法，终于可以来对他们动手了
这里要下载一个插件：
yarn add browser-sync -D
并且要在package.json中添加如下配置：
{
"browserslist": [
"> 2%",
"last 2 versions"
]
}
引入browser-sync插件来做到自动刷新
const browserSync = require('browser-sync').create()
const reload = browserSync.reload;
reload方法就是重新刷新浏览器， del插件就是用来删除文件的,改写html,clean
function html(cb){
src("*.html")
.pipe(reload({stream:true})) //刷新一下
cb()
}
然后我们要做到，文件改变时，浏览器自动刷新，肯定是监听到文件发生变化了，我们就要刷新浏览器，上一步我们已经做了，监听到文件发生变化执行执行方法，那我们在方法中添加刷新浏览器不就行了么
所以所有修改如下：
const {
src,
dest,
watch,
series
} = require('gulp')
const plugins = require('gulp-load-plugins')()
const del = require('del')
const browserSync = require('browser-sync').create()
const reload = browserSync.reload;
function js(cb) {
src("js/*.js")
.pipe(plugins.uglify())
.pipe(dest('./dist/js'))
.pipe(reload({stream:true})) // 添加刷新浏览器操作
cb();
}
function clean(cb){
del("./dist")
cb()
}
function css(cb){
src('css/*.scss')
.pipe(plugins.sass({outputStyle: 'compressed'}))
.pipe(plugins.autoprefixer({
cascade: false,
remove:false
}))
.pipe(dest('./dist/css'))
.pipe(reload({stream:true}))
cb();
}
function service(cb){
browserSync.init({
server:{
baseDir: './'
}
})
watch("css/*.scss", css)
watch("js/*.js", js)
watch("*.html", html)
cb()
}
function html(cb){
src("*.html")
.pipe(reload({stream:true}))
cb()
}
exports.scripts = js;
exports.clean = clean;
exports.styles = css;
exports.default = series([
clean,
js,
css,
html,
service
])
这个时候我们执行，npx gulp, 就能实现文件变化，浏览器实时刷新了，结果就不展示了！谢谢观看！！！
对了还差一步, 配置package.json
"scripts": {
"build": "gulp"
},
然后，之后就可以npm run build, 打包了。是不是更有内味了，溜了溜了！再次感谢观看！
网友评论