Node.js中gulp插件的安装使用

1、Node.js说明

gulp是用JavaScript语言编写的运行在Node.js平台开发的前端构建工具，是前端开发人员自动处理日常任务的首选工具

gulp-cli：启动构建工具的命令行接口

本地gulp：构建时实际运行的程序

gulpfile.js：告诉gulp如何构建软件的指令文件

gulp插件：用于合并、压缩、修改文件的插件

2、全局安装gulp-cli

gulp-cli是gulp的命令行工具，它需要全局安装，在npm工具下载安装gulp-cli工具

-g让npm全局安装这个包，@2.3.0表示全局gulp-cli的版本

npm install gulp-cli@2.3.0 -g

安装成功后运行"gulp -v" 命令

3、在项目中安装gulp

本地gulp的作用是加载和运行gulpfile(gulpfile.js)中的构建指令，另一个作用是暴露API供gulpfile使用

npm install gulp@4.0.2 --save-dev

安装完成后，再次用gulp -v 检查是否安装成功

4、构建项目

安装成功后，在项目根目录下建立gulpfile.js文件,注意这个文件名不能进行更改

在gulpfile.js文件中编写构建项目的任务

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

5、在项目中使用gulp插件处理文件

gulp中的常见插件

gulp-htmlmin         //压缩HTML文件
gulp-csso            //压缩优化css
gulp-babel           //Javascript语法转换
gulp-less            //Less语法转换
gulp-sass            //Sass语法转换
gulp-uglify          //压缩混淆Javascript文件
gulp-file-include    //公共文件包含
browsersync          //浏览器时间实时同步

6、gulp插件使用方法

下面通过gulp-htmlmin 插件和 gulp-file-include插件演示如何将HTML文件中的代码进行压缩，并抽取HTML文件中的公共代码，最终将处理结果输出到dist目录下。

//1、安装插件
//2、引入插件
//3、gulp.task 建立任务
//4、获取文件 gulp.src()  处理文件.pipe()
//5、输出文件.pipe(dest('输出文件位置'))

//1、在npm中输入npm 插件名 安装插件
//引入gulp模块
const gulp = require('gulp');

// 引用gulp-htmlmin插件 文件压缩
const htmlmin = require('gulp-htmlmin');

// 引用gulp-file-include插件 引用公共部分 
const fileInclude = require('gulp-file-include');

//使用gulp.task()方法建立任务
/*
    参数一：任务名
    参数二：回调函数
*/

gulp.task('first', (callback) => {
    //获取要处理的文件
    gulp.src('./src/css/base.css')
        //将处理后的文件输出到dist目录下
        //.pipe()函数只是对文件处理的结果进行包装，并不会直接操作文件
        .pipe(gulp.dest('./dist/css'))
    callback();
})

//建立任务：压缩html以及抽取公共部分
gulp.task('htmlmin', callback => {
    //获取要处理的html文件
    gulp.src('./src/*.html')
        // 抽取html文件中的公共代码
        .pipe(fileInclude())
        // 压缩html文件中的代码
        .pipe(htmlmin({
            collapseWhitespace: true
        }))
        //文件的输出路径
        .pipe(gulp.dest('dist'))
    callback();
})

//使用serise方法
gulp.task('default',gulp.series('first','htmlmin'))

7、压缩并转换Less语法

下面通过gulp-less插件和gulp-csso插件演示如何将css文件中的Less语法转换为css语法，并压缩css文件中的代码，将处理结果输出到dist目录下的css目录中

//1、在npm中输入npm 插件名 安装插件

//引入gulp模块
const gulp = require('gulp');

//引用gulp-less插件
const less = require('gulp-less');

//引用gulp-csso插件
const csso = require('gulp-csso');

//建立任务：压缩css代码并转换less语法
gulp.task('cssmin', callback => {
    //获取文件.less 和.css
    gulp.src(['./src/css/*.less', './src/css/*.css'])
        //将less语法转换为css语法
        .pipe(less())
        //压缩css代码
        .pipe(csso())
        //输出文件
        .pipe(gulp.dest('./dist/css'))
    callback();
})

//使用serise方法
gulp.task('default',gulp.series('cssmin'))

8、压缩并转换Es6语法并复制目录

下面通过gulp-babel插件Es6语法转换为Es5语法，将处理结果输出到dist目录下的js文件中

//1、在npm中输入npm 插件名 安装插件

//引用他 gulp-babel
const babel = require('gulp-babel');

//建立任务 转换es6
gulp.task('jsmin', callback => {
    //选择js目录下的所有JavaScript文件
    gulp.src('./src/js/*.js')
        .pipe(babel({
            //判断当前的代码环境 将代码转换成当前运行环境所支持的代码
            presets:['@babel/env']
        }))
        .pipe(gulp.dest('./dist/js'))
    callback();
})

//建立任务：复制
gulp.task('copy', callback => {
    //获取文件images
    gulp.src('./src/images/*')
        //文件输出
        .pipe(gulp.dest('./dist/images'))
    //获取文件js
    gulp.src('./src/js/*')
        //文件输出
        .pipe(gulp.dest('./dist/js'))
    callback();
})

//使用serise方法
gulp.task('default',gulp.series('jsmin','min'))

9、执行全部构建任务

//使用serise方法
gulp.task('default',gulp.series('first','htmlmin','jsmin','cssmin','copy'))

10、项目依赖管理

(1)pageage.json文件，里面记录了下载的各种gulp插件和版本号

{
  "devDependencies": {
    "gulp": "^4.0.2"
  },
  "dependencies": {
    "@babel/core": "^7.21.3",
    "@babel/preset-env": "^7.20.2",
    "gulp-babel": "^8.0.0",
    "gulp-csso": "^4.0.1",
    "gulp-file-include": "^2.3.0",
    "gulp-htmlmin": "^5.0.1",
    "gulp-less": "^5.0.0"
  }
}