Gulp的常见用法

Posted 2020-11-09 hello word

Gulp 用法

Gulp 的安装部署

• 首先安装 gulp

• 全局安装gulp 命令行工具 npm i -g gulp-cli

• 全局安装 npm i -g gulp

• 在项目的根目录创建一个 gulpfile.js 的文件

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'))
})

gulp 插件

• gulp-htmlmin：html文件压缩
• gulp-csso：css压缩
• gulp-babel：javascript语义转化
• gulp-uglify： 压缩混淆 Javascript
• gulp-file-include：公共文件包含
• browsersync：浏览器实时同步

gulp 代码

html压缩 抽取公共代码

安装 npm install gulp-htmlmin

安装 npm install 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/*.html')
        .pipe(fileinclude())
        // 压缩html文件中的代码
        .pipe(htmlmin({ collapseWhitespace: true }))
        .pipe(gulp.dest('dist'));
});