Node第三方模块_Gulp

Node 第三方模块 Gulp

中文文档：https://www.gulpjs.com.cn/docs/getting-started/using-plugins/

基于node平台开发的前端构建工具 将机械化操作编写成任务, 想要执行机械化操作时执行一个命令行命令任务就能自动执行了 用机器代替手工，提高开发效率。

Gulp能做什么

项目上线，HTML、CSS、JS文件压缩合并

语法转换（es6、less ...）

公共文件抽离

修改文件浏览器自动刷新

Gulp 使用

1. 下载 npm i gulp 下载 gulp 库文件  

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

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

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

5.在项目根目录命令行工具中执行gulp任务 下载命令行工具 npm install gulp-cli -g

gulp 项目名称  如：  gulp first

Gulp中提供的方法

gulp.src()：获取任务要处理的文件

gulp.dest()：输出文件

gulp.task()：建立gulp任务

gulp.watch()：监控文件的变化

案例代码

//npm install gulp  下载gulp
//引入gulp
const gulp = require('gulp')
//使用gulp.task()方法建立任务 1.任务名称 2.callback
gulp.task('first' , ()=> {
//获取要处理的文件
gulp.src('./src/css/base.css')
//将处理好的文件输出到dist目录  pipe 是处理的意思
//代码中没有任何处理 表现为复制
.pipe(gulp.dest('./dist/css');
});

Gulp插件

1.  gulp-htmlmin ：html文件压缩(npm install gulp-htmlmin)
2. gulp-csso ：压缩css
3. gulp-babel ：JavaScript语法转化
4. gulp-less: less语法转化
5. gulp-uglify ：压缩混淆JavaScript
6. gulp-file-include 公共文件包含
7. browsersync 浏览器实时同步   .....

 使用：① 下载插件 ② 引入 const htmlmin = require('gulp-htmlmin');

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');
// html任务
// 1.html文件中代码的压缩操作
// 2.抽取html文件中的公共代码    先抽取 被抽取的文件原位置用  @@include('./common/header.html') 替代

gulp.task('htmlmin', () => {
    gulp.src('./src/*.html')
        .pipe(fileinclude())
        // 压缩html文件中的代码
        .pipe(htmlmin({ 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'))
});

// 构建任务
gulp.task('default', ['htmlmin', 'cssmin', 'jsmin', 'copy']);

PS(补充)

node_modules文件夹的问题：

1.文件夹以及文件过多过碎 传输慢

2.复杂的模块依赖关系需要被记录，确保模块的版本和当前保持一致，否则会导致当前项目运行报错

  解决：    package.json文件：    锁定包的版本  加快下载速度

记录当前项目信息（项目名称、版本、作者、github地址、依赖哪些第三方模块..） npm init -y 生成

项目依赖和开发依赖 

项目依赖： 在项目的开发阶段和线上运营阶段，都需要依赖的第三方包，称为项目依赖

使用npm install 包名命令下载的文件会默认被添加到 package.json 文件的 dependencies 字段中

开发依赖：在项目的开发阶段需要依赖，线上运营阶段不需要依赖的第三方包，称为开发依赖

使用npm install 包名 --save-dev命令将包添加到package.json文件的devDependencies字段中

Node.js中模块加载机制

①没有地址和后缀名  ： require('fs)

• Node.js会假设它是系统模块    Node.js会去node_modules文件夹中

• 首先看是否有该名字的JS文件 再看是否有该名字的文件夹

• 如果是文件夹看里面是否有index.js

• 如果没有index.js查看该文件夹中的package.json中的main选项确定模块入口文件 否则找不到报错

②拥有路径 require('./file.js')  require('./file')

• require方法根据模块路径查找模块，如果是完整路径，直接引入模块。

• 如果模块后缀省略，先找同名JS文件再找同名JS文件夹

• 如果找到了同名文件夹，找文件夹中的index.js 如果文件夹中没有index.js就会去当前文件夹中的package.json文件中查找main选项中的入口文件 如果找指定的入口文件不存在或者没有指定入口文件就会报错，模块没有被找到