【基础】gulp使用详解

[wbccb]

gulp介绍

基于 node 平台开发的前端构建工具，主要用来设定程序自动处理静态资源的工作。

gulp使用

安装

npm install --save-dev gulp

创建 gulpfile.js 的文件

function defaultTask(cb) {
  // place code for your default task here
  cb();
}

exports.default = defaultTask

测试

在项目根目录下执行 gulp 命令：

gulp

如需运行多个任务（task），可以执行 gulp

Gulp提供的方法

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

Gulp插件

我们要处理文件的合并、压缩等操作，接口中没有提供，都放在了插件中。

npm install 插件名 --save

常用插件

• gulp-clean：用于清理;
• gulp-notify：用于打印消息文本;
• gulp-rename：用于修改名字;
• gulp-concat：用于合并文件;
• gulp-zip：用于生成一个zip压缩包;
• gulp-minify-css：用于压缩css;
• gulp-autoprefixer：用于给css添加前缀;
• gulp-imagemin：用于给图片进行优化;
• gulp-uglify：用于压缩js;
• amd-optimize：用于amd模块引用编译；
• gulp-import-css：如果css文件是通过import导入的可以使用此插件进行合并优化;
• gulp-rev-replace：用于替换;
• gulp-useref：引入使用build标记，进行替换;
• gulp-rev：生成md5文件名;
• gulp-filter：对文件进行过滤;
• gulp-header：压缩之后将注释写入到文件的头部
• gulp-if：进行逻辑判断
• gulp-size：获取文件大小
• gulp-less：编译less文件
• gulp-sass：编译sass文件
• gulp-file-include：对文件进行引入
• gulp-sourcemaps：生成map文件
• gulp-livereload：自动刷新
• gulp-clean-css：css压缩
• browserSync：启动server并启动热更新
• gulp-plumber : 监测工作流，报错，防止遇到错误时直接退出gulp
• gulp-rev : 文件名添加版本号
• gulp-css-spritesmith：根据css文件自动生成雪碧图

示例

// 引用 gulp 模块
const gulp = require('gulp');
// 引用 gulp-htmlmin 插件
const htmlmin = require('gulp-htmlmin');
// 引用 gulp-file-include 插件
const fileinclude = require('gulp-file-include');
// 引用 gulp-less 插件
const less = require('gulp-less');
// 引用 gulp-csso 插件
const csso = require('gulp-csso');
// 引用 gulp-babel 插件
const babel = require('gulp-babel');
// 引用 gulp-uglify 插件
const uglify = require('gulp-uglify');
// 使用 gulp.task() 方法建立任务
// 1.任务的名出
// 2.任务的回调函数
gulp.task('first', () => {
    console.log('第一个gulp任务');
    // 1.使用 gulp.src() 获取要处理的文件
    gulp.src('./src/css/base.css')
        // 2.将处理后的文件输出到 dist/css 目录
        .pipe(gulp.dest('./dist/css'));
});

// HTML 任务
// 1. html 文件中代码的压缩操作
// 2. 抽取 html 文件中的公共代码
gulp.task('htmlmin', (cb) => {
    // 使用 gulp.src() 获取 src 目录下的所有 html 文件
    gulp.src('./src/*.html')
        // 抽离公共代码
        .pipe(fileinclude())
        // 压缩 html 文件中的代码，collapseWhitespace:压缩折叠空格
        .pipe(htmlmin({ collapseWhitespace: true }))
        .pipe(gulp.dest('./dist'));
    cb();
});

// Css 任务
// 1. less 语法转换
// 2. css 代码压缩
gulp.task('cssmin', (cb) => {
    // 使用 gulp.src() 获取 css 目录下的所有 less 文件及 css 文件
    // gulp.src('./src/css/*.less')
    gulp.src(['./src/css/*.less', './src/css/*.css'])
        // 将 less 语法进行转换
        .pipe(less())
        // 压缩 css 文件中的代码
        .pipe(csso())
        // 将处理后的文件输出到 dist/css 目录
        .pipe(gulp.dest('./dist/css'));
    cb();
});

// Js 任务
// 1. ES6 代码转换
// 2. js 代码压缩
gulp.task('jsmin', (cb) => {
    // 使用 gulp.src() 获取 js 目录下的所有 js 文件
    gulp.src('./src/js/*.js')
        // es6 转换
        .pipe(babel({
            // 它可以判断当前代码的运行环境，将代码转换为当前运行环境所支持的代码
            presets: ['@babel/env']
        }))
        // 压缩 js 文件
        .pipe(uglify())
        .pipe(gulp.dest('./dist/js'))
    cb();
});

// 复制文件夹
gulp.task('copy', () => {
    // 使用 gulp.src() 获取 src 目录下的 images 文件夹
    return gulp.src('./src/images/*')
        .pipe(gulp.dest('./dist/images'))
    // 使用 gulp.src() 获取 src 目录下的 lib 文件夹
    return gulp.src('./src/lib/*')
        .pipe(gulp.dest('./dist/lib'))
});

// 构建任务
// 当在命令行执行 default 任务时，会依次执行后面的任务
// gulp.series|4.0 依赖顺序执行
// gulp.parallel|4.0 多个依赖嵌套'html','css','js'并行
gulp.task('default', gulp.series('htmlmin', 'cssmin', 'jsmin', 'copy'));

参考

1. https://www.gulpjs.com.cn/docs/getting-started/creating-tasks/
2. https://www.cnblogs.com/joe235/p/12759205.html