Gulp

gulp能干什么

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

gulp的使用

1.使用npm install gulp下载gulp库文件

2.在项目根目录下建立gulpfile.js文件

3.重构项目的文件夹结构 src目录放置源代码文件 dist目录放置构建后文件

4.在gulpfile.js文件中编写任务.

5.在命令行工具中执行gulp任务

gulpfile.js:

// 导入gulp
const gulp = require('gulp')
// 建立gulp任务
// 参数
// 1.任务名称
// 2.回调函数
gulp.task('first', () => {
    // 要处理的文件
    gulp.src('./src/css/base.css')
        // 输出的路径
        .pipe(gulp.dest('./dist/css'))
})

命令行工具中执行gulp任务: gulp first (下载gulp-cli)

gulp中的方法

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

gulp插件

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

html公共部分抽离压缩

//导入htmlmin
const htmlmin = require('gulp-htmlmin');
// 导入include-file
const include_file = require('gulp-include-file');
// 创建任务
gulp.task('htmlmin', () => {
    gulp.src('./src/*.html')
        .pipe(include_file())
        // 进行压缩
        .pipe(htmlmin({ collapseWhitespace: true }))
        .pipe(gulp.dest('./dist'))
})

在html中引入公共部分代码

less语法转换、less文件和css文件压缩

// 导入gulp-less
const less = require('gulp-less');
// 导入gulp-csso
const csso = require('gulp-csso');
// 创建任务
gulp.task('cssmin', () => {
    gulp.src(['./src/css/*.less','./src/css/*.css'])
        // less语法转换
        .pipe(less())
        // css文件压缩
        .pipe(csso())
        .pipe(gulp.dest('./dist/css'))
})

JavaScript语法转化和压缩

// 导入JavaScript语法转化gulp-babel
const babel = require('gulp-babel');
// 导入JavaScript压缩插件gulp-uglify
const uglify = require('gulp-uglify');
// 创建任务
gulp.task('jsmin', () => {
    gulp.src('./src/js/*.js')
        // JavaScript语法转化
        .pipe(babel({
            presets: ['@babel/env']
        }))
        // JavaScript压缩
        .pipe(uglify())
    .pipe(gulp.dest('./dist/js'))
})

构建任务

// 构建任务
gulp.task('default', gulp.parallel('htmlmin', 'cssmin', 'jsmin', 'copy', () => {}) );

命令行工具中执行gulp任务: gulp default 或gulp