Node.js 第三方模块 ------Gulp 插件的使用方法

1、使用命令进行第三方模块的下载和删除    

使用 npm 命令：npm (node package manager) ： node的第三方模块管理工具

• 下载：npm install 模块名称

• 卸载：npm unintall package 模块名称

全局安装与本地安装

• 命令行工具：全局安装

• 库文件：本地安装

  -g表示全局安装，即模块的使用不局限于当前项目，一般用于安装命令行工具。

 

2、第三方模块- nodemon 模块

nodemon是一个命令行工具，用以辅助项目开发。在Node.js中，每次修改文件都要在命令行工具中重新执行该文件，非常繁琐，而使用这个模块，可以帮我们监听这个文件的修改，只要修改保存了，就会重新执行一次。

使用步骤

• 使用npm install nodemon –g 下载它

• 在命令行工具中用nodemon命令替代node命令执行文件

 

3、第三方模块- nrm 模块

nrm ( npm registry manager )：npm下载地址切换工具；

npm默认的下载地址在国外，国内下载速度慢

使用步骤

• 使用npm install nrm –g 下载它

• 查询可用下载地址列表 nrm ls

• 切换npm下载地址 nrm use 下载地址名称

 

4、第三方模块- Gulp模块

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

Gulp能做什么

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

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

• 公共文件抽离

• 修改文件浏览器自动刷新

Gulp使用

• 使用npm install gulp下载gulp库文件

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

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

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

• 在命令行工具中执行gulp任务

Gulp提供的方法

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

• gulp.dest()：输出文件

• gulp.task()：建立gulp任务

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

如果需要执行 gulp里面某一个任务，需要使用gulp给我们提供的命令行工具

• 下载命令： npm install gulp-cli -g

• 使用命令：gulp 任务名称

插件的使用

  1.下载插件

   2.引入模块

   3.编写任务

   以下就是项目打包上线的时候需要做的一些工作：

   html任务 示例demo

目标

• html文件中代码的压缩操作

• 抽取html文件中的公共代码

1.下载插件

npm install gulp-htmlmin

npm install gulp-file-include

2.引入模块

代码：

//用于html压缩的
const htmlmin = require('gulp-htmlmin');
//用于公共部分的引入
const fileinclude = require('gulp-file-include');

 

3.编写任务

代码：

gulp.task('htmlmin', () => {
    gulp.src('./src/*.html')
        //引入公共模块，需要在相应的文件里面写上 @@include(文件路径)
        .pipe(fileinclude())
        // 压缩html文件中的代码
        .pipe(htmlmin({ collapseWhitespace: true }))
        .pipe(gulp.dest('dist'));
});

 

CSS 任务 示例demo

目标

• less语法转换

• css代码压缩

1.下载插件

npm install gulp-csso

npm install gulp-less

2.引入模块

代码：

//用于less转换
const less = require('gulp-less');
//用于css压缩
const csso = require('gulp-csso');

3.编写任务

代码：

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 任务 示例demo

目标

• es6代码转换

• 代码压缩

1.下载插件

npm install gulp-babel @babel/core @babel/preset-env 后面的代表是依赖的插件

npm install gulp-uglify

2.引入模块

代码：

//用于 js的语法转换
const babel = require('gulp-babel');
//用于 js压缩混淆
const uglify = require('gulp-uglify');

3.编写任务

代码：

gulp.task('jsmin', () => {
    gulp.src('./src/js/*.js')
        .pipe(babel({
            // 它可以判断当前代码的运行环境 将代码转换为当前运行环境所支持的代码
            presets: ['@babel/env']
        }))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'))
});

拷贝 任务 示例demo

目标

• 复制文件夹

1.引入模块

代码：
const gulp = require('gulp');

2.编写任务

代码：

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']);