Node中第三方模块Gulp的使用_node 调用 gulp task-CSDN博客

本文链接：https://blog.csdn.net/wby_430/article/details/105468628

Gulp的简单介绍：

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

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

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

Gulp能做什么

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

Gulp使用

使用npm install gulp下载gulp库文件
在项目根目录下建立gulpfile.js文件
重构项目的文件夹结构 src目录放置源代码文件 dist目录放置构建后文件
在gulpfile.js文件中编写任务.
在命令行工具中执行gulp任务

Gulp中提供的方法

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

// 代码示例：
// 1. 首先通过模块的名字gulp对模块进行引用 
const gulp = require('gulp');
  // 2. 使用gulp.task()方法建立任务  gulp.tast('任务的名称','任务回调函数')
 gulp.task('first', () => {
    // 获取要处理的文件
    gulp.src('./src/css/xxx.css') 
    // 将处理后的文件输出到dist目录
    .pipe(gulp.dest('./dist/css'));
 });
Gulp插件（这些插件直接百度搜索，进入官网查看下载插件命令和使用方法https://www.npmjs.com/package/gulp-htmlmin）

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

下面演示下如何使用上面的方法：

要实现的目标是：将一个含有html、css、js、文件夹等的文件通过gulp插件和js代码来转移到另外一个事先定义好的文件夹中，来实现html、css、js等压缩和使用。

1.首先新建一个文件夹，取名为day02，在该文件夹下面，依次的创建dist的空文件夹（用来接受传过来的文件）、src文件夹(存放着事先准备好的html、css、js等文件)、gulpfile.js(必须使用这个名字的js).具体的结构如下：

2.src的目录结构下存放着我们事先准备好的一些代码，

3.接下来通过代码来实现上述功能，把src里面的文件和代码转移输出到创建的空的dist文件夹中，实现代码压缩功能，gulpfile.js的代码如下所示：

// 1. 通过模块的名字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');
// 2. 使用gulp.task建立任务  , gulp.task('任务的名称',任务回调函数)
gulp.task('first', () => {
    console.log('第一个gulp任务开始执行了');
    // (1) 使用gulp.src获取要处理的文件 ，把src目录下的这个base.css 通过.pipe()方法，添加到了dest目录下，在dest目录下
    // 新建立了个css文件夹存放base.css
    gulp.src('./src/css/base.css')
        .pipe(gulp.dest('dist/css'));

});

// html任务
//  1. HTML 文件中的代码的压缩操作
gulp.task('htmlmin', () => {
    gulp.src('./src/*.html')
        //2. 抽取HTML文件中的公共代码
        // 先抽取公共部分的文件代码
        .pipe(fileinclude())
        // 压缩HTML文件中的代码
        .pipe(htmlmin({ collapseWhitespace: true })) // 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) 代码压缩
gulp.task('jsmin', () => {
    gulp.src('./src/js/*.js')
        .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'));
});

// 构建任务  就不用在一一的执行其他的任务了，主要执行这个任务，其他的任务都会按照一定的顺序进行执行

// (1) gulp 版本3 的运行方式
// gulp.task('default',['htmlmin','cssmin','jsmin','copy'])

// (2) gulp 版本4的运行方式 
gulp.task('default', gulp.parallel('htmlmin', 'cssmin', 'jsmin', 'copy'));

4. 在powershell里面执行命令，代码最后一句话的作用就是把上面的几个全部连着放在一起，只需要执行一次命令就能把上面的全部执行。输入gulp default 命令可以直接执行，或者直接输入gulp命令，它会自动的查找到里面的default，如下图所示，会看到依次执行的顺序。