2021-09-23 gulp

GULP

gulp 是一个项目开发的 自动化打包构建工具

基于 node 环境来运行的

什么是自动化打包构建工具

比如

我们在开发的过程中,会写到 js 文件,css 文件,等等

我们的项目如果想上线,那么一定要体积小一点,文件大小越小越好

而我们在写 js 文件的时候,会有很多 换行/空格 之类的东西

这些 换行/空格 都是占文件体积的一部分

那么我们在上线之前就要吧这些 换行/空格 尽可能的删除掉

我们又不能一个文件一个文件的去删除

就要用到一个自动化工具来帮助我们把这些多余的东西干掉

这个就是自动化工具的意义

常见的自动化打包构建工具

gulp

webpack

安装 GULP

gulp 是一个依赖于 node 的环境工具

所以我们需要先安装一个 全局 gulp 依赖

直接使用 npm 去安装就可以了

# 使用 npm 安装全局依赖 gulp

$ npminstall--globalgulp

等待安装完毕就好了

这个全局环境一个电脑安装一次就好了

还是照例检查一下是否安装成功

$ gulp--version

依赖包学习地址 https://www.npmjs.com

使用 GULP

安装完毕以后,我们就可以使用 GULP 对我们的项目进行自动化构建了

首先我们要有一个项目

- gulp_demo    项目文件夹

  - src        项目源码

   + css      css 文件夹

   + js       js 文件夹

   + pages    html 文件夹

   + sass     sass 文件夹

   + lib      第三方文件夹

   + static   静态资源文件夹

目录结构不一定都是这个样子

但是最好是一个便于管理的文件夹目录结构

因为是一个项目了,最好使用 npm 来帮我们管理一下

这样可以记录我们的下载使用了那些依赖

所以在项目文件夹 gulp-demo 里面执行一个 npm 初始化

$ cdgulp_demo

$ npminit-y

执行完毕之后,再来看一下我们的项目目录

- gulp_demo

  + src

  + package.json

项目 GULP 配置

我们之前已经安装过 gulp 全局依赖了

但是每一个项目都要在安装一次 gulp 的项目依赖

因为每一个项目的打包构建规则都不一样,所以不能全都配置成一个

所以我们要在项目里面再次进行 gulp 安装

$ cdgulp_demo

$ npminstall-Dgulp

项目中的 gulp 依赖要和全局 gulp 环境保持版本一致

接下来就是对这个项目进行打包构建的配置

gulp 的使用,要在项目目录下新建一个 gulpfile.js

在这个 gulpfile.js 文件里面进行配置

然后使用 gulp 进行构建的时候就会按照 gulpfile.js 文件里面的规则进行打包构建

再来看一下我们的目录结构

- gulp_demo

  + node_modules         依赖包目录

  + src                  项目源码

  + gulpfile.js          gulp 配置文件

  + package-lock.json    依赖下载版本 json 文件

  + package.json         项目管理 json 文件

接下来我们就是在 gulpfile.js 文件里面进行配置,让我们的打包构建可以生效

打包 CSS 文件

我们从简单的内容开始,先来打包构建 css 文件

其实就是在 gulpfile.js 里面进行一些配置

第一个事情就是引入 gulp

// 我是 gulpfile.js 文件

// 1. 引入 gulp

constgulp=require('gulp')

gulp 是基于任务来完成构建的

所以我们要创建一个打包 css 的任务

// 我是 gulpfile.js 文件

// 1. 引入 gulp

const gulp = require('gulp')

// 2. 创建一个 css 的任务

//  gulp.task() 是用来创建任务的

//  参数一: 任务名称

//  参数二: 一个函数(这个任务要做什么事情)

gulp.task('css', function () {


})

有了任务以后,我们就要在 css 这个任务里面写一些这个任务要做的事情了

我们要把 ./src/css/所有css文件 都进行压缩处理

这个时候我们自己完成不了,就需要借助一个第三方依赖

npm i -D gulp-cssmin

下载完毕以后,去文件中进行配置

// 我是 gulpfile.js 文件

// 1. 引入 gulp

const gulp = require('gulp')

// 2. 引入 gulp-cssmin

const cssmin = require('gulp-cssmin')

// 3. 创建一个 css 的任务

gulp.task('css', function () {

    return gulp

    .src('./src/css/**')  // 对哪些文件进行操作

    .pipe(cssmin())        // 都做什么,这里做的就是进行 css 压缩

    .pipe(gulp.dest('./dist/css'))  // 把压缩完毕的文件放在 dist 文件夹下的 css 文件夹 

})

gulp.src() 是指找到那些文件对其操作

gulp.pipe() 是指要做什么

gulp.dest() 是指输出到哪个目录下,如果没有这个目录存在会自动创建这个目录

所以上面哪个 css 任务的意思就是

把 ./src/css/ 目录下的所有文件

进行压缩

压缩完毕后放在 ./dist/ 下的 css/ 文件夹下

接下来,就是执行一下这个叫做 css 的任务就行了

直接在控制台使用指令

# 表示运行 gulpfils.js 配置文件中的 css 任务

$ gulp css

执行完毕以后,就会在 gulp_demo 目录下生成一个 dist/ 文件夹

里面就有我们压缩好的 css 文件

自动添加前缀

我们希望在 css 压缩之前,能帮我自动把需要前缀的属性 自动把前缀添加上 就好了

这个是可以做到的

我们又需要一个依赖了

npm i -D gulp-autoprefixer

安装完还是去到文件中进行配置

// 我是 gulpfile.js 文件

// 1. 引入 gulp

const gulp = require('gulp')

// 2. 引入 gulp-cssmin

const cssmin = require('gulp-cssmin')

// 3. 引入 gulp-autoprefixer

const autoPrefixer = require('gulp-autoprefixer')

// 4. 创建一个 css 的任务

gulp.task('css', function () {

    return gulp

    .src('./src/css/**') 

    .pipe(autoPrefixer({

        overrideBrowserslist:["last 5 version","iOS > 3","Firefox > 2"]

    }))

    .pipe(cssmin())     

    .pipe(gulp.dest('./dist/css')) 

})

因为添加前缀需要在压缩之前添加

所以我们就直接在任务里面多做一个事情就行了

打包 SASS 文件

接下来我们解决一下 sass 的问题

因为有的时候我们开发要使用 sass 所以我们要解决一下 sass 的问题

其实打包 sass 和 css 差不多,只不过先要把 sass 解析成 css

把 sass 解析成 css

自动添加前缀

压缩一下

放到对应的文件夹中

使用 gulp 解析 sass 文件需要用到一个依赖

npm i -D gulp-sass

报错,需要下载node-sass作为其依赖包

npm i -D node-sass@4.14.1  然后再去下载gulp-sass依赖

然后我们就去到配置文件里面进行配置就好了

// 我是 gulpfile.js 文件

// 1. 引入 gulp

const gulp = require('gulp')

// 2. 引入 gulp-cssmin

const cssmin = require('gulp-cssmin')

// 2-1. 引入 gulp-autoprefixer

const autoPrefixer = require('gulp-autoprefixer')

// 2-2. 引入 gulp-sass

const sass = require('gulp-sass')

// 2-1. 创建一个 css 的任务

gulp.task('css', function () {

    return gulp

    .src('./src/css/**') 

    .pipe(autoPrefixer({

        overrideBrowserslist:["last 5 version","iOS > 3","Firefox > 2"]

    }))

    .pipe(cssmin())     

    .pipe(gulp.dest('./dist/css')) 

})

// 2-2. 创建一个 sass 任务

gulp.task('sass', function () {

    return gulp

    .src('./src/sass/**')

    .pipe(sass())

    .pipe(autoPrefixer({

        overrideBrowserslist:["last 5 version","iOS > 3","Firefox > 2"]

    }))

    .pipe(cssmin())

    .pipe(gulp.dest('./dist/css'))

})

我们的 sass 文件编译完以后也是 css 文件,所以就也放在 css 文件夹下就好了

就是要注意一下别和本来 css 文件夹下的文件重名就好了

然后就可以去命令行执行 sass 这个任务了

# 执行 sass 任务

$ gulp sass

打包 JS 文件

接下来就是打包一下 js 文件了

其实套路是一样的

先来做最简单的操作

压缩一下 js 文件

需要用到一个依赖

npm i -D gulp-uglify

然后依旧是去到配置文件中进行配置

// 我是 gulpfile.js 文件

// 1. 引入 gulp

const gulp = require('gulp')

// 2-1. 引入 gulp-cssmin

const cssmin = require('gulp-cssmin')

// 2-2. 引入 gulp-autoprefixer

const autoPrefixer = require('gulp-autoprefixer')

// 2-3. 引入 gulp-sass

const sass = require('gulp-sass')

// 3-1. 引入 gulp-uglify

const uglify = require('gulp-urlify')

// 2-1. 创建一个 css 的任务

gulp.task('css', function () {

    return gulp

    .src('./src/css/**') 

    .pipe(autoPrefixer({

        overrideBrowserslist:["last 5 version","iOS > 3","Firefox > 2"]

    }))

    .pipe(cssmin())     

    .pipe(gulp.dest('./dist/css')) 

})

// 2-2. 创建一个 sass 任务

gulp.task('sass', function () {

    return gulp

    .src('./src/sass/**')

    .pipe(sass())

    .pipe(autoPrefixer({

        overrideBrowserslist:["last 5 version","iOS > 3","Firefox > 2"]

    }))

    .pipe(cssmin())

    .pipe(gulp.dest('./dist/css'))

})

// 3. 创建一个 js 任务

gulp.task('js', function () {

    return gulp

    .src('./src/js/**')

    .pipe(uglify())

    .pipe(gulp.dest('./dist/js'))

})

然后我们去命令行执行 js 这个任务

# 执行 js 任务

$ gulp js

编译 ES6 语法

之前我们学习 es6 的时候就说过

很多浏览器不是很认识 es6 的语法

我们要把他编译成 es5 的语法

所以我们在打包 js 文件的时候,就要转换一下

我们依旧是使用依赖来完成,只不过 es6 转 es5 需要三个依赖

npm i -D gulp-babel@7.0.1

npm i -D babel-core

npm i -D babel-preset-es2015

然后我们就去配置文件里面进行配置就可以了

// 我是 gulpfile.js 文件

// 1. 引入 gulp

const gulp = require('gulp')

// 2-1. 引入 gulp-cssmin

const cssmin = require('gulp-cssmin')

// 2-2. 引入 gulp-autoprefixer

const autoPrefixer = require('gulp-autoprefixer')

// 2-3. 引入 gulp-sass

const sass = require('gulp-sass')

// 3-1. 引入 gulp-uglify

const uglify = require('gulp-urlify')

// 3-2. 引入 gulp-babel

//      es6 转 es5 虽然需要下载三个依赖,但是只需要引入一个 gulp-babel 就可以了

const babel = require('gulp-babel')

// 2-1. 创建一个 css 的任务

gulp.task('css', function () {

    return gulp

    .src('./src/css/**') 

    .pipe(autoPrefixer({

        overrideBrowserslist:["last 5 version","iOS > 3","Firefox > 2"]

    }))

    .pipe(cssmin())     

    .pipe(gulp.dest('./dist/css')) 

})

// 2-2. 创建一个 sass 任务

gulp.task('sass', function () {

    return gulp

    .src('./src/sass/**')

    .pipe(sass())

    .pipe(autoPrefixer())

    .pipe(cssmin())

    .pipe(gulp.dest('./dist/css'))

})

// 3. 创建一个 js 任务

gulp.task('js', function () {

    return gulp

    .src('./src/js/**')

    .pipe(babel({

        presets: ['es2015']

    }))

    .pipe(uglify())

    .pipe(gulp.dest('./dist/js'))

})

引入以后,只要在压缩之前执行一下转码就可以了

注意要传递一个参数

然后再次执行 js 任务就可以了

# 执行 js 任务

$ gulp js

打包 HTML 文件

接下来就要把 html 文件解决一下了

还是一个套路

压缩 html 文件需要一个依赖

npm i -D gulp-htmlmin

下载好以后去到配置文件中进行配置

// 我是 gulpfile.js 文件

// 1. 引入 gulp

const gulp = require('gulp')

// 2-1. 引入 gulp-cssmin

const cssmin = require('gulp-cssmin')

// 2-2. 引入 gulp-autoprefixer

const autoPrefixer = require('gulp-autoprefixer')

// 2-3. 引入 gulp-sass

const sass = require('gulp-sass')

// 3-1. 引入 gulp-uglify

const uglify = require('gulp-urlify')

// 3-2. 引入 gulp-babel

//      es6 转 es5 虽然需要下载三个依赖,但是只需要引入一个 gulp-babel 就可以了

const babel = require('gulp-babel')

// 4. 引入 gulp-htmlmin

const htmlmin = require('gulp-htmlmin')

// 2-1. 创建一个 css 的任务

gulp.task('css', function () {

    return gulp

    .src('./src/css/**') 

    .pipe(autoPrefixer({

        browsers: ['last 2 versions']

    }))

    .pipe(cssmin())     

    .pipe(gulp.dest('./dist/css')) 

})

// 2-2. 创建一个 sass 任务

gulp.task('sass', function () {

    return gulp

    .src('./src/sass/**')

    .pipe(sass())

        .pipe(autoPrefixer({

        overrideBrowserslist:["last 5 version","iOS > 3","Firefox > 2"]

  }))

    .pipe(cssmin())

    .pipe(gulp.dest('./dist/css'))

})

// 3. 创建一个 js 任务

gulp.task('js', function () {

    return gulp

    .src('./src/js/**')

    .pipe(babel({

        presets: ['es2015']

    }))

    .pipe(uglify())

    .pipe(gulp.dest('./dist/js'))

})

// 4. 创建一个 html 任务

gulp.task('html', function () {

    return gulp

    .src('./src/pages/**')

    .pipe(htmlmin({

        removeEmptyAttributes:true, // 移除空的属性

            collapseWhitespace:true, // 移除空格

            minifyCSS:true,  // 压缩 style 标签

            minifyJS:true,    // 压缩 script 标签

    }))

    .pipe(gulp.dest('./dist/pages'))

})

这样就配置完毕了

接下来就是去命令行运行一下 html 任务

# 运行 html 任务

$ gulp html

处理 LIB 和 STATIC 文件

接下来我们就是处理 lib 和 static 里面的文件了

因为这些都是第三方的文件和一些图片之类的信息

不需要压缩处理,只要给我转到 dist 文件夹下就可以了

所以不需要依赖,直接处理就行

// 我是 gulpfile.js 文件

// 1. 引入 gulp

const gulp = require('gulp')

// 2-1. 引入 gulp-cssmin

const cssmin = require('gulp-cssmin')

// 2-2. 引入 gulp-autoprefixer

const autoPrefixer = require('gulp-autoprefixer')

// 2-3. 引入 gulp-sass

const sass = require('gulp-sass')

// 3-1. 引入 gulp-uglify

const uglify = require('gulp-urlify')

// 3-2. 引入 gulp-babel

//      es6 转 es5 虽然需要下载三个依赖,但是只需要引入一个 gulp-babel 就可以了

const babel = require('gulp-babel')

// 4. 引入 gulp-htmlmin

const htmlmin = require('gulp-htmlmin')

// 2-1. 创建一个 css 的任务

gulp.task('css', function () {

    return gulp

    .src('./src/css/**') 

    .pipe(autoPrefixer({

        browsers: ['last 2 versions']

    }))

    .pipe(cssmin())     

    .pipe(gulp.dest('./dist/css')) 

})

// 2-2. 创建一个 sass 任务

gulp.task('sass', function () {

    return gulp

    .src('./src/sass/**')

    .pipe(sass())

        .pipe(autoPrefixer({

        overrideBrowserslist:["last 5 version","iOS > 3","Firefox > 2"]

  }))

    .pipe(cssmin())

    .pipe(gulp.dest('./dist/css'))

})

// 3. 创建一个 js 任务

gulp.task('js', function () {

    return gulp

    .src('./src/js/**')

    .pipe(babel({

        presets: ['es2015']

    }))

    .pipe(uglify())

    .pipe(gulp.dest('./dist/js'))

})

// 4. 创建一个 html 任务

gulp.task('html', function () {

    return gulp

    .src('./src/pages/**')

    .pipe(htmlmin({

        removeEmptyAttributes:true, // 移除空的属性

            collapseWhitespace:true, // 移除空格

            minifyCSS:true,  // 压缩 style 标签

            minifyJS:true,    // 压缩 script 标签

    }))

    .pipe(gulp.dest('./dist/pages'))

})

// 5. 创建一个 lib 任务

gulp.task('lib', function () {

    return gulp

    .src('./src/lib/**')

    .pipe(gulp.dest('./dist/lib'))

})

// 6. 创建一个 static 任务

gulp.task('static', function () {

    return gulp

    .src('./src/static/**')

    .pipe(gulp.dest('./dist/static'))

})

接下来就是去命令行执行 lib 任务和 static 任务

# 执行 lib 任务

$ gulp lib

# 执行 static 任务

$gulp static

批量按循序执行任务

我们的几个和文件相关的任务都配置完毕了

但是我们不能在开发过程中一个任务一个任务的去执行

不方便也不是很只能

所以我们要统一执行任务

这个时候就需要进行一个配置,让几个任务一起执行一下

这个不需要依赖,我们只需要配置一个叫做 default 的任务

gulp 在运行的时候会默认执行 default 任务

// 我是 gulpfile.js 文件

// 1. 引入 gulp

const gulp = require('gulp')

// 2-1. 引入 gulp-cssmin

const cssmin = require('gulp-cssmin')

// 2-2. 引入 gulp-autoprefixer

const autoPrefixer = require('gulp-autoprefixer')

// 2-3. 引入 gulp-sass

const sass = require('gulp-sass')

// 3-1. 引入 gulp-uglify

const uglify = require('gulp-urlify')

// 3-2. 引入 gulp-babel

//      es6 转 es5 虽然需要下载三个依赖,但是只需要引入一个 gulp-babel 就可以了

const babel = require('gulp-babel')

// 4. 引入 gulp-htmlmin

const htmlmin = require('gulp-htmlmin')

// 2-1. 创建一个 css 的任务

gulp.task('css', function () {

    return gulp

    .src('./src/css/**') 

    .pipe(autoPrefixer({

        browsers: ['last 2 versions']

    }))

    .pipe(cssmin())     

    .pipe(gulp.dest('./dist/css')) 

})

// 2-2. 创建一个 sass 任务

gulp.task('sass', function () {

    return gulp

    .src('./src/sass/**')

    .pipe(sass())

        .pipe(autoPrefixer({

        overrideBrowserslist:["last 5 version","iOS > 3","Firefox > 2"]

  }))

    .pipe(cssmin())

    .pipe(gulp.dest('./dist/css'))

})

// 3. 创建一个 js 任务

gulp.task('js', function () {

    return gulp

    .src('./src/js/**')

    .pipe(babel({

        presets: ['es2015']

    }))

    .pipe(uglify())

    .pipe(gulp.dest('./dist/js'))

})

// 4. 创建一个 html 任务

gulp.task('html', function () {

    return gulp

    .src('./src/pages/**')

    .pipe(htmlmin({

        removeEmptyAttributes:true, // 移除空的属性

            collapseWhitespace:true, // 移除空格

            minifyCSS:true,  // 压缩 style 标签

            minifyJS:true,    // 压缩 script 标签

    }))

    .pipe(gulp.dest('./dist/pages'))

})

// 5. 创建一个 lib 任务

gulp.task('lib', function () {

    return gulp

    .src('./src/lib/**')

    .pipe(gulp.dest('./dist/lib'))

})

// 6. 创建一个 static 任务

gulp.task('static', function () {

    return gulp

    .src('./src/static/**')

    .pipe(gulp.dest('./dist/static'))

})

// 7. 配置一个默认任务

gulp.task('default', gulp.series('css', 'sass', 'js', 'html', 'lib', 'static'))

这样配置完毕以后,当你运行 gulp 的时候,会自动执行 default 任务,并按顺序执行

然后 default 任务就会把后面gulp.series('css', 'sass', 'js', 'html', 'lib', 'static')的任务依次执行

接下来就是去命令行里面运行 gulp

# 运行 gulp,会默认执行 default 任务

$ gulp

清除 DIST 文件夹

当你在编译的时候,如果第一次编译有一个叫做 a.css 的文件,他会帮你编译

后来你把 a.css 文件改名字了,改叫 b.css,再次进行编译的时候

会给你新生成一个 b.css 文件在 dist 文件夹中

之前的 a.css 文件也不会消失

那么这样就不是很好了

我们比较好的做法是

在执行所有的编译之前

先把 dist 文件夹删除掉

然后再执行所有的编译操作

这样就不会用多余的文件留下了

这个时候我们就要使用一个依赖

npm i -D gulp-clean

然后去配置文件里面配置一个任务

// 我是 gulpfile.js 文件

// 1. 引入 gulp

const gulp = require('gulp')

// 2-1. 引入 gulp-cssmin

const cssmin = require('gulp-cssmin')

// 2-2. 引入 gulp-autoprefixer

const autoPrefixer = require('gulp-autoprefixer')

// 2-3. 引入 gulp-sass

const sass = require('gulp-sass')

// 3-1. 引入 gulp-uglify

const uglify = require('gulp-urlify')

// 3-2. 引入 gulp-babel

//      es6 转 es5 虽然需要下载三个依赖,但是只需要引入一个 gulp-babel 就可以了

const babel = require('gulp-babel')

// 4. 引入 gulp-htmlmin

const htmlmin = require('gulp-htmlmin')

// 2-1. 创建一个 css 的任务

gulp.task('css', function () {

    return gulp

    .src('./src/css/**') 

    .pipe(autoPrefixer({

        browsers: ['last 2 versions']

    }))

    .pipe(cssmin())     

    .pipe(gulp.dest('./dist/css')) 

})

// 2-2. 创建一个 sass 任务

gulp.task('sass', function () {

    return gulp

    .src('./src/sass/**')

    .pipe(sass())

        .pipe(autoPrefixer({

        overrideBrowserslist:["last 5 version","iOS > 3","Firefox > 2"]

  }))

    .pipe(cssmin())

    .pipe(gulp.dest('./dist/css'))

})

// 3. 创建一个 js 任务

gulp.task('js', function () {

    return gulp

    .src('./src/js/**')

    .pipe(babel({

        presets: ['es2015']

    }))

    .pipe(uglify())

    .pipe(gulp.dest('./dist/js'))

})

// 4. 创建一个 html 任务

gulp.task('html', function () {

    return gulp

    .src('./src/pages/**')

    .pipe(htmlmin({

        removeEmptyAttributes:true, // 移除空的属性

            collapseWhitespace:true, // 移除空格

            minifyCSS:true,  // 压缩 style 标签

            minifyJS:true,    // 压缩 script 标签

    }))

    .pipe(gulp.dest('./dist/pages'))

})

// 5. 创建一个 lib 任务

gulp.task('lib', function () {

    return gulp

    .src('./src/lib/**')

    .pipe(gulp.dest('./dist/lib'))

})

// 6. 创建一个 static 任务

gulp.task('static', function () {

    return gulp

    .src('./src/static/**')

    .pipe(gulp.dest('./dist/static'))

})

// 8. 创建一个 clean 任务

gulp.task('clean', function () {

    return gulp

    .src('./dist')

    .pipe(clean())

})

// 7. 配置一个默认任务

gulp.task('default', gulp.series('clean','css', 'sass', 'js', 'html', 'lib', 'static'))

接下来我们执行 default 任务

# 执行 default 任务

$ gulp

自动打开浏览器

我们的打包工作已经完成了

接下来要是能再打包完毕自动帮我把浏览器打开就好了

省的我自己去开了

这个时候是可以做到的

需要一个依赖

npm i -D gulp-webserver

然后进行配置

// 我是 gulpfile.js 文件

// 1. 引入 gulp

const gulp = require('gulp')

// 2-1. 引入 gulp-cssmin

const cssmin = require('gulp-cssmin')

// 2-2. 引入 gulp-autoprefixer

const autoPrefixer = require('gulp-autoprefixer')

// 2-3. 引入 gulp-sass

const sass = require('gulp-sass')

// 3-1. 引入 gulp-uglify

const uglify = require('gulp-urlify')

// 3-2. 引入 gulp-babel

//      es6 转 es5 虽然需要下载三个依赖,但是只需要引入一个 gulp-babel 就可以了

const babel = require('gulp-babel')

// 4. 引入 gulp-htmlmin

const htmlmin = require('gulp-htmlmin')

// 2-1. 创建一个 css 的任务

gulp.task('css', function () {

    return gulp

    .src('./src/css/**') 

    .pipe(autoPrefixer({

        overrideBrowserslist:["last 5 version","iOS > 3","Firefox > 2"]

    }))

    .pipe(cssmin())     

    .pipe(gulp.dest('./dist/css')) 

})

// 2-2. 创建一个 sass 任务

gulp.task('sass', function () {

    return gulp

    .src('./src/sass/**')

    .pipe(sass())

        .pipe(autoPrefixer({

        overrideBrowserslist:["last 5 version","iOS > 3","Firefox > 2"]

  }))

    .pipe(cssmin())

    .pipe(gulp.dest('./dist/css'))

})

// 3. 创建一个 js 任务

gulp.task('js', function () {

    return gulp

    .src('./src/js/**')

    .pipe(babel({

        presets: ['es2015']

    }))

    .pipe(uglify())

    .pipe(gulp.dest('./dist/js'))

})

// 4. 创建一个 html 任务

gulp.task('html', function () {

    return gulp

    .src('./src/pages/**')

    .pipe(htmlmin({

        removeEmptyAttributes:true, // 移除空的属性

            collapseWhitespace:true, // 移除空格

            minifyCSS:true,  // 压缩 style 标签

            minifyJS:true,    // 压缩 script 标签

    }))

    .pipe(gulp.dest('./dist/pages'))

})

// 5. 创建一个 lib 任务

gulp.task('lib', function () {

    return gulp

    .src('./src/lib/**')

    .pipe(gulp.dest('./dist/lib'))

})

// 6. 创建一个 static 任务

gulp.task('static', function () {

    return gulp

    .src('./src/static/**')

    .pipe(gulp.dest('./dist/static'))

})

// 8. 创建一个 clean 任务

gulp.task('clean', function () {

    return gulp

    .src('./dist')

    .pipe(clean())

})

// 9. 创建一个 webserver 任务

gulp.task('webserver', function () {

    return gulp

        .src('./dist')

        .pipe(webserver({

            host: 'localhost',          // 配置打开浏览器的域名

            port: 3000,                // 配置打开浏览器的端口号

            livereload: true,          // 自动刷新浏览器

            open: './pages/index.html'  // 默认打开 dist 文件夹下的哪个文件

        }))

})

// default 任务

gulp.task('default', gulp.series('clean','css', 'sass', 'js', 'html', 'lib', 'static','webserver'))

因为我们打开浏览器应该再所有压缩任务都完成以后

再把浏览器打开

所以我们把他排在任务的第三个队列上

这个 webserver 会自动帮我们启动一个服务器

是一个 node 的服务器

所以我们的页面也相当于是在服务器上打开的

修改内容自动刷新

我们刚才再配置 webserver 的时候有一个自动刷新的功能被我们开启了

但是我们修改一些文件的时候发现并没有自动刷新

这个是因为,我们只是开启了自动刷新,但是你修改文件以后并没有自动帮我们重新编译

那么 dist/ 文件夹下的内容就不会更改,那么刷新就没有意义

所以我们应该再制作一个任务,当文件夹下的内容修改的时候,自动帮我们从新编译

这个不需要任何依赖,我们只需要配置一个监控文件改变的任务就行了

// 我是 gulpfile.js 文件

// 1. 引入 gulp

const gulp = require('gulp')

// 2-1. 引入 gulp-cssmin

const cssmin = require('gulp-cssmin')

// 2-2. 引入 gulp-autoprefixer

const autoPrefixer = require('gulp-autoprefixer')

// 2-3. 引入 gulp-sass

const sass = require('gulp-sass')

// 3-1. 引入 gulp-uglify

const uglify = require('gulp-urlify')

// 3-2. 引入 gulp-babel

//      es6 转 es5 虽然需要下载三个依赖,但是只需要引入一个 gulp-babel 就可以了

const babel = require('gulp-babel')

// 4. 引入 gulp-htmlmin

const htmlmin = require('gulp-htmlmin')

// 2-1. 创建一个 css 的任务

gulp.task('css', function () {

    return gulp

    .src('./src/css/**') 

    .pipe(autoPrefixer({

        overrideBrowserslist:["last 5 version","iOS > 3","Firefox > 2"]

    }))

    .pipe(cssmin())     

    .pipe(gulp.dest('./dist/css')) 

})

// 2-2. 创建一个 sass 任务

gulp.task('sass', function () {

    return gulp

    .src('./src/sass/**')

    .pipe(sass())

        .pipe(autoPrefixer({

        overrideBrowserslist:["last 5 version","iOS > 3","Firefox > 2"]

  }))

    .pipe(cssmin())

    .pipe(gulp.dest('./dist/css'))

})

// 3. 创建一个 js 任务

gulp.task('js', function () {

    return gulp

    .src('./src/js/**')

    .pipe(babel({

        presets: ['es2015']

    }))

    .pipe(uglify())

    .pipe(gulp.dest('./dist/js'))

})

// 4. 创建一个 html 任务

gulp.task('html', function () {

    return gulp

    .src('./src/pages/**')

    .pipe(htmlmin({

        removeEmptyAttributes:true, // 移除空的属性

            collapseWhitespace:true, // 移除空格

            minifyCSS:true,  // 压缩 style 标签

            minifyJS:true,    // 压缩 script 标签

    }))

    .pipe(gulp.dest('./dist/pages'))

})

// 5. 创建一个 lib 任务

gulp.task('lib', function () {

    return gulp

    .src('./src/lib/**')

    .pipe(gulp.dest('./dist/lib'))

})

// 6. 创建一个 static 任务

gulp.task('static', function () {

    return gulp

    .src('./src/static/**')

    .pipe(gulp.dest('./dist/static'))

})

// 8. 创建一个 clean 任务

gulp.task('clean', function () {

    return gulp

    .src('./dist')

    .pipe(clean())

})

// 9. 创建一个 webserver 任务

gulp.task('webserver', function () {

    return gulp

        .src('./dist')

        .pipe(webserver({

            host: 'localhost',          // 配置打开浏览器的域名

            port: 3000,                // 配置打开浏览器的端口号

            livereload: true,          // 自动刷新浏览器

            open: './pages/index.html'  // 默认打开 dist 文件加下的哪个文件

        }))

})

// 10. 创建一个 watch 任务

gulp.task('watch', function () {

    gulp.watch('./src/css/**', gulp.series('css'))

    gulp.watch('./src/sass/**', gulp.series('sass'))

    gulp.watch('./src/js/**', gulp.series('js'))

    gulp.watch('./src/pages/**',gulp.series('html'))

    gulp.watch('./src/lib/**', gulp.series('lib'))

    gulp.watch('./src/static/**', gulp.series('static'))

})

// default 任务

gulp.task('default', gulp.series('clean','css', 'sass', 'js', 'html', 'lib', 'static','webserver','watch'))

因为再文件压缩完毕以后,我们就可以开始监控了

所以把这个 watch 任务和 webserver 任务并行就可以了

接下来我们就可以再命令行运行 gulp 了

# 运行 gulp

$ gulp

这个时候,我们只要进行代码书写就可以了

随着我们写完,会自动帮我们打包编译,并且自动进行浏览器刷新的

使用 GULP 配置代理

我们的 gulp 自动打包构建已经完成了

我们的正常开发已经可以进行下去了

我们就剩最后一个功能没有实现了

那就是跨域请求的问题

因为我们的项目中肯定有一些数据是向后台请求过来的

那么我们就要发送请求

我们又不能保重 服务端接口 和我们是同源的

所以我们就要配置一个代理

gulp 给我们启动的这个服务器是 node 的服务器

所以也可以直接配置代理

不需要任何依赖,只要再 webserver 任务中多加一个配置就可以了

gulp.task('webserver', function () {

    return gulp

        .src('./dist')

        .pipe(webserver({

            host: 'localhost',

            port: 3000,

            livereload: true,

            open: './pages/index.html',

            proxies: [ // 配置所有代理

                { // 其中一个代理配置

                    source: '/login', // 使用的关键字

                    target: 'http://localhost:80/login.php' // 代理的路径

                }

            ]

        }))

})

这个时候你就可以正常发送请求了

当你要请求代理地址的时候,只要再这里配置一下,使用代理关键字进行请求就可以了

GULP完整配置文件(简单版)

所有需要用到的依赖

gulp

gulp-cssmin

gulp-autoprefixer

gulp-sass(node-sass)

gulp-uglify

gulp-babel@7.0.1

babel-core

babel-preset-es2015

gulp-htmlmin

gulp-clean

gulp-webserver

gulpfile.js 文件内容

// 我是 gulpfile.js 文件

const gulp = require('gulp')

const cssmin = require('gulp-cssmin')

const autoPrefixer = require('gulp-autoprefixer')

const sass = require('gulp-sass')

const uglify = require('gulp-urlify')

const babel = require('gulp-babel')

const htmlmin = require('gulp-htmlmin')

const clean = require('gulp-clean')

const webserver = require('gulp-webserver')

gulp.task('css', function () {

    return gulp

    .src('./src/css/**') 

    .pipe(autoPrefixer({

        overrideBrowserslist:["last 5 version","iOS > 3","Firefox > 2"]

    }))

    .pipe(cssmin())     

    .pipe(gulp.dest('./dist/css')) 

})

gulp.task('sass', function () {

    return gulp

    .src('./src/sass/**')

    .pipe(sass())

    .pipe(autoPrefixer({

            overrideBrowserslist:["last 5 version","iOS > 3","Firefox > 2"]

    }))

    .pipe(cssmin())

    .pipe(gulp.dest('./dist/css'))

})

gulp.task('js', function () {

    return gulp

    .src('./src/js/**')

    .pipe(babel({

        presets: ['es2015']

    }))

    .pipe(uglify())

    .pipe(gulp.dest('./dist/js'))

})

gulp.task('html', function () {

    return gulp

    .src('./src/pages/**')

    .pipe(htmlmin({

        removeEmptyAttributes:true,

            collapseWhitespace:true,

            minifyCSS:true, 

            minifyJS:true,   

    }))

    .pipe(gulp.dest('./dist/pages'))

})

gulp.task('lib', function () {

    return gulp

    .src('./src/lib/**')

    .pipe(gulp.dest('./dist/lib'))

})

gulp.task('static', function () {

    return gulp

    .src('./src/static/**')

    .pipe(gulp.dest('./dist/static'))

})

gulp.task('clean', function () {

    return gulp

    .src('./dist')

    .pipe(clean())

})

gulp.task('webserver', function () {

    return gulp

        .src('./dist')

        .pipe(webserver({

            host: 'localhost',         

            port: 3000,               

            livereload: true,         

            open: './pages/index.html',

        proxies: [

                {

                    source: '/login',

                    target: 'http://localhost:80/login.php'

                }

            ]

        }))

})

gulp.task('watch', function () {

    gulp.watch('./src/css/**', ['css'])

    gulp.watch('./src/sass/**', ['sass'])

    gulp.watch('./src/js/**', ['js'])

    gulp.watch('./src/pages/**', ['html'])

    gulp.watch('./src/lib/**', ['lib'])

    gulp.watch('./src/static/**', ['static'])

})

gulp.task('default', gulp.series('clean','css', 'sass', 'js', 'html', 'lib', 'static','webserver','watch'))

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,125评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,293评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,054评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,077评论 1 291
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,096评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,062评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,988评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,817评论 0 273
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,266评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,486评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,646评论 1 347
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,375评论 5 342
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,974评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,621评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,796评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,642评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,538评论 2 352

推荐阅读更多精彩内容