gulp的初级入门配置

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, 打包了。是不是更有内味了，溜了溜了！再次感谢观看！