第三方模块Gulp

liangjielaoshi 2020-06-11

Gulp是基于node平台开发的前端构建工具

将机械化操作编写成任务,想要执行机械化操作时执行一个命令行命令任务就能自动执行了

用机器代替手工,提高开发效率

1. Gulp能做什么:

  • 项目上线,HTML、CSS、 JS文件压缩合并
  • 语法转换(es6、less...)
  • 公共文件抽离
  • 修改文件浏览器自动刷新

2. Gulp使用:
① 使用npm install gulp下载gulp文件。 注意:库文件都是本地安装,不需要加-g
② 在项目根目录下建立gulpfile.js文件。gulpfile.js文件的名字是gulp要求的,不能随意更改
③ 重构项目的文件夹结构src目录放置源代码文件dist目录放置构建后文件
④ 在gulpfile.js文件中编写任务
⑤ 在命令行工具中执行gulp任务

3. Gulp中提供的方法:

  • gulp.src():获取任务要处理的文件
  • gulp.dest():输出文件
  • gulp.task():建立gulp任务
  • gulp.watch():监控文件的变化
const gulp = require(‘gulp‘);
// 使用gulp.task()方法建立任务
gulp.task(‘first‘, () => {
    // 获取要处理的文件
    gulp.src(‘./src/css/base.css‘)
    // 将处理后的文件输出到dist目录
          .pipe(gulp.dest(‘./dist/css‘));
});

注意:必须要把处理的代码写在.pipe里

如何执行这个任务呢?如果使用node gulpfile.js则执行的是gulpfile.js整个文件。而我们需要执行的是当前这个文件中的first任务,我们可以使用gulp命令来执行这个文件。

下载gulp命令行工具:npm install gulp-cli -g注意不是库文件,需要全局安装

下载完成之后,命令行中多了一个命令:gulp first

4. Gulp插件:

gulp属于轻内核的第三方模块,提供的方法非常少,所有的其他功能都是通过插件的方式实现。

  • gulp-htmlmin:htm|文件压缩
  • gulp-csso:压缩css
  • gulp-babel:JavaScript语法转化
  • gulp-less:less语法转化
  • gulp-uglity:压缩混淆JavaScript
  • gulp-file-include:公共文件包含

在html中先抽离出公共的代码,然后再引入,gulp中使用@@include引入:

// 引入公共的头部部分
@@include(‘./common/header.html‘);
  • browsersync:浏览器实时同步
// 引用gulp模块
const gulp = require(‘gulp‘);
const htmlmin = require(‘gulp-htmlmin‘);
const fileinclude = require(‘gulp-file-include‘);
const less = require(‘gulp-less‘);
const csso = require(‘gulp-csso‘);
const babel = require(‘gulp-babel‘);
const uglify = require(‘gulp-uglify‘);

// html任务
// 1. html文件中代码的压缩操作
// 2. 抽取html文件中的公共代码
gulp.task(‘htmlmin‘, () => {
    // src目录下的所有html文件
    gulp.src(‘./src/*.html‘)
          .pipe(fileinclude())
          // 压缩html文件中的代码, collapseWhitespace为是否压缩空格
          .pipe(htmlmin({ collapseWhitespace:true }))
          .pipe(gulp.dest(‘dist‘));

});

// 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‘));
});

// js任务
// 1. es6代码转换
// 2. 代码压缩
// 安装babel模块:npm install --save gulp-babel @babel/core @babel/preset-env
// @babel/core @babel/preset-env是gulp-babel所依赖的模块
gulp.task(‘jsmin‘, () => {
    gulp.src(‘./src/js/*.js‘)
          // 将less语法转换为css语法
          .pipe(babel({
                // 它可以判断当前代码的运行环境,将代码转换为当前运行环境所支持的代码
                presets: [‘@babel/env‘]
          }))
          .pipe(uglify())
          // 将处理结果进行输出
          .pipe(gulp.dest(‘dist/js‘));
});

// 复制文件夹
gulp.task(‘copy‘, () => {
    gulp.src(‘./src/images/*‘)
          .pipe(gulp.dest(‘dist/images‘));
    gulp.src(‘./src/lib/*‘)
          .pipe(gulp.dest(‘dist/lib‘));
});

如果想要执行一个命令,其他的所有任务就会自动执行,那就需要进行gulp构建任务:

// 构建任务
// 输入命令gulp default,则其他任务也就会自动执行
gulp.task(‘default‘, [‘htmlmin‘, ‘cssmin‘, ‘jsmin‘, ‘copy‘]);

相关推荐