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