Gulp（笔记）

1. 概述

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

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

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

2. Gulp能做什么

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

2. Gulp使用

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

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

// 引入gulp模块
const gulp = require('gulp');
//使用gulp.task建立任务
// 1. 任务的名称
// 2. 任务的回调函数


gulp.task('first', () => {
    console.log('我的第一个gulp任务');
    gulp.src('./src/reset.css') //取到我们要处理的文件
        .pipe(gulp.dest('dist/css')); //处理后的文件放在dist文件下的css里
    // .pipe里的是要执行的任务
})

3. Gulp插件

1. gulp-htmlmin：html文件压缩
2. gulp-csso：压缩css
3. gulp-babel：JavaScript语法转化
4. gulp-less：less语法转化
5. gulp-uglify：压缩混淆JavaScript
6. gulp-file-include 公共文件包含
7. 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');
const { doesNotMatch } = require('assert');
//使用gulp.task建立任务
// 1. 任务的名称
// 2. 任务的回调函数


gulp.task('first', done => {
    console.log('我的第一个gulp任务');
    gulp.src('./src/css/reset.css') //取到我们要处理的文件
        .pipe(gulp.dest('dist/css')); //处理后的文件放在
    // .pipe里的是要执行的任务
    done()
})


// html任务
// 1. html的压缩操作
// 2. 抽取html文件中的公共代码

gulp.task('htmlmin', done => {
    gulp.src('./src/html/*.html')
        // 抽取公共部分,先手动抽取到common文件夹中 然后在引回代码所在处
        .pipe(fileinclude())
        // 压缩操作
        .pipe(htmlmin({ collapseWhitespace: true }))
        // 输出
        .pipe(gulp.dest('dist/html')), done()
})


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


//js任务
// 1. es6代码转换
// 2. 代码压缩
gulp.task('jsmin', done => {
    gulp.src('./src/js/*.js')
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(uglify())
        .pipe(gulp.dest('./dist/js'))
    done()
})


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

//构建任务
// 并行
gulp.task('default', gulp.parallel('htmlmin', 'cssmin', 'jsmin', 'copy'));

关于顺序执行和并行执行的大佬文章
https://segmentfault.com/a/1190000017571288?utm_source=tag-newest