第三方模块Gulp

第三方模块 Gulp

• 基于node平台开发的前端构建工具
• 将机械化操作编写成任务, 想要执行机械化时执行一行命令任务就能自动执行了
• 用机器代替手工, 提高开发效率。

1. Gulp 能做什么

• 项目上线，HTML、css、js文件压缩合并
• 语法转化
• 公共文件抽离
• 修改文件浏览器自动刷新

2. Gulp 使用

1. 使用npm i gulp下载gulp库文件
2. 在项目根目录下建立gulpfile.js文件
3. 重构项目的文件夹结构src目录放置源代码文件, dist目录放置构建后的文件
4. 在gulpfile.js文件中编写任务
5. 在命令行工具中执行gulp任务

目录结构

3. Gulp 中提供的方法

• gulp.src(): 获取任务要处理的文件
• gulp.dest(): 输出文件
• gulp.task(): 建立gulp任务
• gulp.watch(): 监控文件的变化

const gulp = require('gulp')

// 使用gulp.task建立任务
// 1. 第一个参数是任务名称
// 2.任务的回调函数
gulp.task('first', () => {
  console.log('第一个gulp任务执行了')
  // 1.使用gulp.src获取要处理的文件
  gulp.src('./src/css/apply.css')
  	// 将处理的文件输出到dist目录中
    .pipe(gulp.dest('dist/css'))
})

gulp给我们提供了同名的命令行工具, 可以让我们使用他提供的命令来执行任务

1. npm i gulp-cli -g安装
2. 使用gulp 任务名称来执行任务
   

4. Gulp插件

• gulp-htmlmin: html文件压缩
• gulp-csso: 压缩css
• gulp-babel: JavaScript语法转化
• gulp-less: less语法转化
• gulp-ugligy: 压缩混淆JavaScript
• gulp-file-include: 公共文件包含
• browsersync: 浏览器实时同步

4.1插件使用方法

1. 下载
2. 引用

4.2 htmlmin插件

下载npm i gulp-htmlmin gulp-file-include

const gulp = require('gulp')
const htmlmin = require('gulp-htmlmin')
const fileinclude = require('gulp-file-include')
// html任务
// 1. html文件中代码的压缩操作
// 2. 抽取html文件中的公共代码
gulp.task('htmlmin', () => {
  gulp.src('./src/views/*.html')
    // 抽取html文件中的公共代码
    .pipe(fileinclude())
    // 压缩html文件中的代码
    .pipe(htmlmin({ collapseWhitespace: true }))
    .pipe(gulp.dest('dist/views'))
})

抽取的代码用@@include('文件路径')引入

4.3 css任务

• 下载npm i gulp-less gulp-csso

const gulp = require('gulp')
const less = require('gulp-less')
const csso = require('gulp-csso')
// css任务
// 1. less语法转化
// 2. css代码压缩
gulp.task('cssmin', () => {
  // 选择css目录下的所有less文件以及css文件
  gulp.src(["./src/css/*.less", './src/css/*.css'])
    //将less语法转换为css语法
    .pipe(less())
    // 将css代码进行压缩
    .pipe(csso()) 
    // 将处理的结果进行输出
    .pipe(gulp.dest('dist/css'))
})

4.4 js任务

• 下载npm i gulp-babel @babel/preset-env @babel/core gulp-uglify

// js任务
// 1. es6代码转换
// 2.代码压缩
const gulp = require('gulp')
const babel = require('gulp-babel')
const uglify = require('gulp-uglify')

gulp.task('jsmin', () => {
  gulp.src('./src/js/*.js')
    .pipe(babel({
      // 它可以判断当前代码的运行环境, 将代码转换为当前运行环境所支持的代码
      presets: ['@babel/env']
    }))
    // 压缩js代码
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'))
})

4.5 复制文件

const gulp = require('gulp')
// 复制文件夹
gulp.task('copy', () => {
  gulp.src('./src/images/*')
    .pipe(gulp.dest('dist/images'));

  gulp.src('./src/lib/*')
    .pipe(gulp.dest('dist/lib'))
})