【Gulp】使用教程

最新推荐文章于 2024-03-19 11:35:31 发布
最新推荐文章于 2024-03-19 11:35:31 发布
阅读量755 收藏 10
点赞数 3
分类专栏： 前端工具库 文章标签： gulp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45677671/article/details/114639500
版权

文章目录

自动化打包构建工具

我们在开发的过程中，会写到 js 文件，css 文件，等等
我们的项目如果想上线，那么一定要体积小一点，文件大小越小越好
而我们在写 js 文件的时候，会有很多 换行/空格 之类的东西
这些 换行/空格 都是占文件体积的一部分
那么我们在上线之前就要吧这些 换行/空格 尽可能的删除掉
我们又不能一个文件一个文件的去删除
就要用到一个自动化工具来帮助我们把这些多余的东西干掉
这个就是自动化工具的意义

安装 gulp

  • gulp是一个依赖node的环境工具
  • 安装gulp工具：
  • npm i gulp -g
  • 全局安装表示在当前电脑中可以使用gulp工具了
  • 安装gulp依赖包：
  • npm i gulp --save-dev
  • 因为在上线后是不需要这个包的，所以将这个项目安装在开发依赖
  • 局部安装表示在当前项目要使用的gulp
  • 测试是否安装成功：
  • gulp -v
  • 出现版本号表示安装成功
    在这里插入图片描述

使用 gulp

  • 安装完毕以后，我们就可以使用 GULP 对我们的项目进行自动化构建了
  • 首先我们要有一个项目
- gulp_demo    项目文件夹
  - src        项目源码
    + css      css 文件夹
    + js       js 文件夹
    + pages    html 文件夹
    + sass     sass 文件夹
    + lib      第三方文件夹
    + static   静态资源文件夹
  • 目录结构不一定都是这个样子
  • 但是最好是一个便于管理的文件夹目录结构
  • 因为是一个项目了，最好使用 npm 来帮我们管理一下
  • 这样可以记录我们的下载使用了那些依赖
  • 所以在项目文件夹 gulp-demo 里面执行一个 npm 初始化
cd gulp_demo # 先跳转到该项目文件夹
npm init -y # 执行 npm 初始化
  • 执行完毕之后，再来看一下我们的项目目录
- gulp_demo
  + src 
  + package.json

项目 gulp 配置

  • 我们之前已经安装过 gulp 全局依赖了
  • 但是每一个项目都要在安装一次 gulp 的项目依赖
  • 因为每一个项目的打包构建规则都不一样，所以不能全都配置成一个
  • 所以我们要在项目里面再次进行 gulp 安装
cd gulp_demo
npm install -D gulp@3.9.1
  • 项目中的 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
const gulp = 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')


// 2. 创建一个 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/ 文件夹下
  • 接下来，就是执行一下这个叫做 K 的任务就行了
  • 直接在控制台使用指令
# 表示运行 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')

// 2-1. 引入 gulp-autoprefixer 
const autoPrefixer = require('gulp-autoprefixer')


// 2. 创建一个 css 的任务
gulp.task('css', function () {
    return gulp
    	.src('./src/css/**')   
    	.pipe(autoPrefixer({
        	browsers: ['last 2 versions']
    	}))
    	.pipe(cssmin())       
    	.pipe(gulp.dest('./dist/css'))  
})
  • 因为添加前缀需要在压缩之前添加
  • 所以我们就直接在任务里面多做一个事情就行了

打包 SASS 文件

  • 有的时候我们开发要使用 sass 所以我们要解决一下 sass 的问题
  • 其实打包 sass 和 css 差不多，只不过先要把 sass 解析成 css
    • 把 sass 解析成 css
    • 自动添加前缀
    • 压缩一下
  • 使用 gulp 解析 sass 文件需要用到一个依赖
  • npm i -D 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({
        	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())
    	.pipe(cssmin())
    	.pipe(gulp.dest('./dist/css'))
})
  • 我们的 sass 文件编译完以后也是 css 文件，所以就也放在 css 文件夹下就好了
  • 就是要注意一下别和本来 css 文件夹下的文件重名就好了
  • 然后就可以去命令行执行 sass 这个任务了
# 执行 sass 任务
gulp sass

打包 JS 文件

  • 接下来就是打包一下 js 文件了，其实套路是一样的
  • 需要用到一个依赖
  • npm i -D gulp-uglify
  • 然后依旧是去到配置文件中进行配置
// 我是 gulpfile.js 文件

// 1. 引入 gulp
const gulp = require('gulp')

// 3-1. 引入 gulp-uglify
const uglify = require('gulp-urlify')

// 3. 创建一个 js 任务
gulp.task('js', function () {
    return gulp
    	.src('./src/js/**')
    	.pipe(uglify())
    	.pipe(gulp.dest('./dist/js'))
})
  • 然后我们去命令行执行 js 这个任务
# 执行 js 任务
gulp js

编译 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');

// 3-1. 引入 gulp-uglify
const uglify = require('gulp-urlify');

// 3-2. 引入 gulp-babel
// es6 转 es5 虽然需要下载三个依赖，但是只需要引入一个 gulp-babel 就可以了
const babel = require('gulp-babel');

// 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 文件需要一个依赖：
  • npm i -D gulp-htmlmin
  • 下载好以后去到配置文件中进行配置
// 我是 gulpfile.js 文件

// 1. 引入 gulp
const gulp = require('gulp')

// 4. 引入 gulp-htmlmin
const htmlmin = require('gulp-htmlmin')

// 4. 创建一个 html 任务
gulp.task('html', function () {
    return gulp
    	.src('./src/pages/**')
    	.pipe(htmlmin({
        	removeEmptyAttibutes: true, // 移出所有空属性
        	collapseWhitespace: true // 压缩 html
    	}))
    	.pipe(gulp.dest('./dist/pages'))
})
  • 接下来就是去命令行运行一下 html 任务
# 运行 html 任务
gulp html

处理 LIB 和 STATIC 文件

  • 接下来我们就是处理 lib 和 static 里面的文件了
  • 因为这些都是第三方的文件和一些图片之类的信息
  • 不需要压缩处理，只要给我转到 dist 文件夹下就可以了
  • 所以不需要依赖，直接处理就行
// 我是 gulpfile.js 文件

// 1. 引入 gulp
const gulp = require('gulp')

// 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())
    	.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({
        	removeEmptyAttibutes: true, // 移出所有空属性
        	collapseWhitespace: true // 压缩 html
    	}))
    	.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', ['css', 'sass', 'js', 'html', 'lib', 'static'])
  • 这样配置完毕以后，当你运行 gulp 的时候，会自动执行 default 任务
  • 然后 default 任务就会把后面数组中写的几个任务并行执行了
  • 接下来就是去命令行里面运行 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')

// 5. 引入 gulp-clean
const clean = require('gulp-clean')


// 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())
    	.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({
        	removeEmptyAttibutes: true, // 移出所有空属性
        	collapseWhitespace: true // 压缩 html
    	}))
    	.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', ['css', 'sass', 'js', 'html', 'lib', 'static'])
  • 接下来我们执行任务的时候就应该先执行 clean 任务，再执行 default 任务
# 执行 clean 任务
gulp clean

# 执行 default 任务
gulp

按顺序执行任务

  • 因为每次打包都要执行一个 clean 任务
  • 那么我们就可以把 clean 任务也加到 default 任务的队列里面执行
  • gulp.task('default', ['clean', css', 'sass', 'js', 'html', 'lib', 'static'])
  • 这样我们运行的时候，每次就都会帮我们执行 clean 任务了
  • 但是会出现一个问题
因为后面队列里面的任务是并行的
那么有的时间长有的时间短
那么就会出现有一些文件已经压缩完毕放在 dist/ 文件夹里面了
然后 clean 任务执行完毕的时候又给直接清除掉了
这样不是很好
  • 我们就需要让这些任务出现先后顺序
先执行一下 clean 任务
clean 执行完毕以后，剩下的几个压缩文件的任务可以并行执行
  • 这个时候我们就需要用到一个依赖
  • npm i -D run-sequence
  • 这个依赖是逐步执行任务的一个包
  • 这个时候我们修改一下 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')

// 5. 引入 gulp-clean
const clean = require('gulp-clean')

// 6. 引入 run-sequence
const runSequence = require('run-sequence')


// 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())
    	.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({
        	removeEmptyAttibutes: true, // 移出所有空属性
        	collapseWhitespace: true // 压缩 html
    	}))
    	.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. 改写 default 任务
gulp.task('default', function () {
    // 里面的每一个参数都可以是一个任务或者一个任务队列
    // 再执行任务的时候，会把前一个任务队列完成的情况下再执行下一个任务队列
  	runSequence('clean', ['css', 'sass', 'js', 'html', 'lib', 'static'])
})
  • 这样依赖，每次都是先执行 clean 任务
  • 执行完毕之后再并行执行那些压缩的任务就不会出现问题了
  • 然后我们就去命令行中运行 gulp 执行一下 default 任务就可以了
# 运行 gulp
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')

// 5. 引入 gulp-clean
const clean = require('gulp-clean')

// 6. 引入 run-sequence
const runSequence = require('run-sequence')

// 7. 引入 gulp-webserver
const webserver = require('gulp-webserver')


// 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())
    	.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({
        	removeEmptyAttibutes: true, // 移出所有空属性
        	collapseWhitespace: true // 压缩 html
    	}))
    	.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 文件夹下的哪个文件
        }))
})

// 7. 改写 default 任务
gulp.task('default', function () {
    // 里面的每一个参数都可以是一个任务或者一个任务队列
    // 再执行任务的时候，会把前一个任务队列完成的情况下再执行下一个任务队列
  	runSequence(
        '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')

// 5. 引入 gulp-clean
const clean = require('gulp-clean')

// 6. 引入 run-sequence
const runSequence = require('run-sequence')

// 7. 引入 gulp-webserver
const webserver = require('gulp-webserver')


// 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())
    	.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({
        	removeEmptyAttibutes: true, // 移出所有空属性
        	collapseWhitespace: true // 压缩 html
    	}))
    	.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/**', ['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'])
})

// 7. 改写 default 任务
gulp.task('default', function () {
    // 里面的每一个参数都可以是一个任务或者一个任务队列
    // 再执行任务的时候，会把前一个任务队列完成的情况下再执行下一个任务队列
  	runSequence(
        '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@3.9.1
gulp-cssmin
gulp-autoprefixer
gulp-sass
gulp-uglify
gulp-babel@7.0.1
babel-core
babel-preset-es2015
gulp-htmlmin
gulp-clean
run-sequence
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 runSequence = require('run-sequence')
const webserver = require('gulp-webserver')

gulp.task('css', function () {
    return gulp
    	.src('./src/css/**')   
    	.pipe(autoPrefixer({
        	browsers: ['last 2 versions']
    	}))
    	.pipe(cssmin())       
    	.pipe(gulp.dest('./dist/css'))  
})

gulp.task('sass', function () {
    return gulp
    	.src('./src/sass/**')
    	.pipe(sass())
    	.pipe(autoPrefixer())
    	.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({
        	removeEmptyAttibutes: true,
        	collapseWhitespace: 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', function () {
  	runSequence(
        'clean', 
        ['css', 'sass', 'js', 'html', 'lib', 'static'],
    	['webserver', 'watch'])
})
一颗不甘坠落的流星
关注
  • 3
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
gulp使用教程.docx
09-13
# gulp使用教程 ## 一、gulp简介 Gulp是一款基于Node.js的自动化构建工具，它允许开发者通过编写简单的JavaScript任务来实现构建流程的自动化。这些任务可以包括文件的编译、合并、压缩、清理等操作。Gulp的核心...
前端——》gulp打包的执行原理及其部分插件详解
叙传
08-06 890
gulp是一个非常流行的前端自动化构建工具，主要用来设定程序自动处理静态资源的工作。简单说，gulp就是用来打包项目的。 先看一下 我的前端项目结构，应该跟大多数人的项目结构都相同： 如上图所示： src目录：代码目录 bower_components目录：静态js目录 build目录：src目录的编译目录，可删除，编译后会重新生成 node_modules目录：node环境的固定目录 本文讨论中的最主要的目录： 打包文件：gulpfile.js 打包文件的主要内容： var g...
Gulp的使用
2301_76702774的博客
03-18 1947
gulp是一个，主要用来设定程序的工作。简单的说，gulp就是用来的，可以将指定的文件按照设定好的打包压缩规范，压缩之后存储到指定的文件夹位置。之前gulp程序有自己的运行环境，现在gulp程序可以在node.js中运行。
gulp打包（含第三方模块下载教学）
qq_45799465的博客
02-26 4181
目录 一、创建项目文件夹 二、项目文件夹初始化 三、 依赖包的下载 3.1 事前准备 3.2全局依赖包的下载 3.2.1 下载gulp全局依赖包 3.2.2 下载全局 node-sass依赖包 3.3 开发依赖包的下载 3.3.1 下载gulp开发依赖包 3.3.2 css文件打包压缩依赖包 3.3.3JavaScript文件 打包压缩需要的依赖包 3 3.3.4html文件打包压缩需要的依赖包 3.3.5sass文件 打包压缩需要的依赖包 ...
Angular企业级开发(6)-使用Gulp构建和打包前端项目
weixin_34233618的博客
02-05 71
1.gulp介绍 基于流的前端自动化构建工具，利用gulp可以提高前端开发效率，特别是在前后端分离的项目中。使用gulp能完成以下任务： 压缩html、css和js 编译less或sass等 压缩图片 启动本地静态服务器 其他 2.gulp构建 前端构建流程： 开发->分析->测试->编译->发布部署 一段简单的基于gulp的项目构建代码，gulpfile.js内...
gulp 压缩html内的js,gulp实战技巧之gulp-uglify压缩js
weixin_26849971的博客
06-03 694
摘要：前面讲了压缩css的几款插件，这篇就介绍下压缩js的一款插件--gulp-uglify。使用gulp-uglify可以压缩我们的js代码，也可以使用其提供的混淆功能对代码进行简单的混淆，注意是混淆了变量名而已哈......上一篇讲的是压缩js吧！一、压缩js1.1、为什么要压缩？一个js文件通常都上百行，有的甚至上千行。如果不压缩，加上注释的话，一个文件通常都100KB+，但实际压缩后会大大...
gulp使用教程.pdf
09-13
【gulp使用教程】 Gulp是一个基于Node.js的自动化任务运行器，它被广泛应用于前端开发领域，用于构建项目，执行各种代码处理任务，如编译、压缩、格式化等。这个工具极大地提升了开发者的工作效率，因为它能自动化...
前端自动化构建工具gulp使用教程.zip
01-09
前端自动化构建工具gulp使用教程.zip 除了webpack,别忘了还有其它自动化构建工具
angularJS：这个仓库提供git使用教程gulp使用教程angularJS入门->进阶的教程
02-03
angularJS这个仓库提供git使用教程gulp使用教程angularJS入门的教程。仓库会不定期更新。
前端构建工具gulp使用教程（二）、常用gulp插件以及gulp使用完整实例-附件资源
03-02
前端构建工具gulp使用教程（二）、常用gulp插件以及gulp使用完整实例-附件资源
gulp的安装及使用（超详细）
qq_53556413的博客
03-21 2677
使用Gulp进行任务自动化可以让前端开 发人员更加高效地构建和管理自己的项 目，并可以大大减少重复的手动操作。
利用gulp工具对常规web项目进行压缩打包
热门推荐
Marco创作间
01-11 1万+
本文介绍用gulp工具对一个常规的web项目进行打包，达到对项目中的html、css、js文件进行压缩以及优化图片的效果。
gulp工具的使用
weixin_58448088的博客
02-27 1613
gulp是什么？ gulp是一个自动化构建工具，主要用来设定程序自动处理静态资源的工作。简单的说，gulp就是用来打包项目的，可以将指定的文件按照设定好的打包压缩规范，压缩之后存储到指定的文件夹位置。之前gulp程序有自己的运行环境，现在gulp程序可以在node.js中运行。 设定gulp打包压缩 1、创建项目文件夹 2、初始化项目文件夹 3、下载gulp相关依赖包 4、按照gulp指定的语法规范，设定配置gulp打包压缩规范 gulp依赖包的下载过程 1、创建项目文件夹，src.
gulp 自动打包压缩工具，2024年前端开发实战
最新发布
03-19 936
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】解视频**如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）[外链图片转存中…(img-stC9as4E-1710819320545)]开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
gulp的使用
m0_55836496的博客
09-17 825
Gulp是基于node的一个自动化构建工具，开发者可以使用它构建自动化工作流程,页自动刷新，CSS预处理，代码检测，图片压缩等功能，只需要简单的命令行就可以全部完成。使用它，可以简化工作，让你把重点放在功能的开发上，同时减少人为失误，提高开发的效率和质量。node中的第三方包,通过npm下载gulp 是node中的第三方模块gulp.task(任务名,回调函数)gulp.src(文件路径) 设置文件的路径gulp.pipe() 管道方法 将文件流输出到指定的方法中。
gulp的简单使用
qq_39465116的博客
08-08 1539
gulp使用
angular配合gulp进行代码打包和压缩
锦瑟年华的博客
08-27 3535
这里说一下angular代码配合gulp的打包流程，首先要下载gulp，使用npm全局安装。当然要配合node.js使用。这里说下打包的问题。刚开始是打算将所有代码打包到一起，经过一番努力之后终于打包完成，但是我发现了一个严重的问题，那就是打包到一起的代码并不能很好的运行(页面直接炸掉了)，后来找到了原因，是因为我把所有的html代码打包到一起之后破坏了原有Controller和congig中的引用
基于gulp构建的angular1.x自动化项目
I大俊
08-21 1272
基于gulp构建的angular1.x自动化项目
自动化前端开发：gulp基础教程
3. **编译Sass/LESS**：使用`gulp-sass`或`gulp-less`插件，可以将Sass或LESS预处理器的代码转换为CSS。 4. **编译CoffeeScript**：使用`gulp-coffee`插件，可以将CoffeeScript代码转换为JavaScript。 5. **markdown...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一颗不甘坠落的流星

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值