1.nodemon
- nodemon是一个命令行工具，用以辅助项目开发。
- 在Node.js中，每次修改文件都要在命令行工具中重新执行该文件，非常繁琐。
- 使用nodemon执行命令，每次修改js文件都会自动重新执行js文件
使用步骤
- 使用npm install nodemon –g 下载它(-g是全局安装，如果是本地安装不需要-g)
- 在命令行工具中用nodemon命令替代node命令执行文件
2.nrm
- nrm ( npm registry manager )：npm下载地址切换工具
- npm默认的下载地址在国外，国内下载速度慢
使用步骤
- 使用npm install nrm –g 下载它
- 查询可用下载地址列表 nrm ls
- 切换npm下载地址 nrm use 下载地址名称
nrm ls
* npm -------- https://registry.npmjs.org/
yarn ------- https://registry.yarnpkg.com/
cnpm ------- http://r.cnpmjs.org/
taobao ----- https://registry.npm.taobao.org/
nj --------- https://registry.nodejitsu.com/
npmMirror -- https://skimdb.npmjs.com/registry/
edunpm ----- http://registry.enpmjs.org/
nrm use taobao
npm -------- https://registry.npmjs.org/
yarn ------- https://registry.yarnpkg.com/
cnpm ------- http://r.cnpmjs.org/
* taobao ----- https://registry.npm.taobao.org/
nj --------- https://registry.nodejitsu.com/
npmMirror -- https://skimdb.npmjs.com/registry/
edunpm ----- http://registry.enpmjs.org/
3.Gulp
- 基于node平台开发的前端构建工具
- 将机械化操作编写成任务, 想要执行机械化操作时执行一个命令行命令任务就能自动执行了
用机器代替手工，提高开发效率
3.1Gulp的作用
- 项目上线，HTML、CSS、JS文件压缩合并
- 语法转换（es6、less ...）
- 公共文件抽离
- 修改文件浏览器自动刷新
3.2Gulp的使用
- 1.使用npm install gulp下载gulp库文件
- 2 安装gulp任务执行方法npm install gulp-cli -g（全局安装 命令gulp 任务名称）
- 2.在项目根目录下建立gulpfile.js文件
- 3.重构项目的文件夹结构 src目录放置源代码文件 dist目录放置构建后文件
- 4.在gulpfile.js文件中编写任务.
- 5.在命令行工具中执行gulp任务 gulp 任务名称
3.3Gulp中提供的方法
- gulp.src(); 获取任务要处理的文件
- gulp.dest(); 输出文件
- gulp.task(); 建立gulp任务
- gulp.watch(); 监控文件的变化
- gulp.pipe();处理文件
3.4Gulp插件
- gulp-htmlmin ：html文件压缩
- gulp-csso ：压缩css
- gulp-babel ：JavaScript语法转化
- gulp-less: less语法转化
- gulp-uglify ：压缩混淆JavaScript
- gulp-file-include 公共文件包含
- browsersync 浏览器实时同步
代码示例
// 引用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');
// 使用gulp.task建立任务
// 1.任务的名称
// 2.任务的回调函数
gulp.task('first', () => {
console.log('我们人生中的第一个gulp任务执行了');
// 1.使用gulp.src获取要处理的文件
gulp.src('./src/css/base.css')
.pipe(gulp.dest('dist/css'));
});
// html任务
// 1.html文件中代码的压缩操作
// 2.抽取html文件中的公共代码
//3.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']);
执行任务 gulp default
gulp copy
gulp jsmin
4.package.json文件
4.1node_modules文件夹的问题
- 1.文件夹以及文件过多过碎，当我们将项目整体拷贝给别人的时候,，传输速度会很慢很慢.
- 2.复杂的模块依赖关系需要被记录，确保模块的版本和当前保持一致，否则会导致当前项目运行报错
4.2 package.json文件的作用
项目描述文件，记录了当前项目信息，例如项目名称、版本、作者、github地址、当前项目依赖了哪些第三方模块等。
使用npm init -y命令生成(-y 全部执行默认数据)
4.3 项目依赖
- 在项目的开发阶段和线上运营阶段，都需要依赖的第三方包，称为项目依赖
- 使用npm install 包名命令下载的文件会默认被添加到 package.json 文件的 dependencies 字段中
{
"dependencies": {
"jquery": "^3.3.1“
}
}
4.4 开发依赖
- 在项目的开发阶段需要依赖，线上运营阶段不需要依赖的第三方包，称为开发依赖
-使用npm install 包名 --save-dev命令将包添加到package.json文件的devDependencies字段中
{
"devDependencies": {
"gulp": "^3.9.1“
}
}
4.5 package-lock.json文件的作用
- 锁定包的版本，确保再次下载时不会因为包版本不同而产生问题
- 加快下载速度，因为该文件中已经记录了项目所依赖第三方包的树状结构和包的下载地址，重新安装时只需下载即可，不需要做额外的工作
4.6 备注
- 1传输文件不需要传输node_modules文件，需要传输package.json 然后执行npm install 会默认查找package.json中的dependencies自动加载
- 2项目依赖和开发依赖
开发依赖 npm install （非常多的module）
项目（生成）依赖 npm install --production (只安装dependencies中的module)
gulp需要添加到devDependencies（开发）环境中
npm install gulp --save-dev
4.7 scripts作用
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build":"nodemon app.js"
},
npm run buid --执行的命令是nodemon app.js
5.第三方模块config
作用：允许开发人员将不同运行环境下的应用配置信息抽离到单独的文件中，模块内部自动判断当前应用的运行环境，
并读取对应的配置信息，极大提供应用配置信息的维护成本，避免了当运行环境重复的多次切换时，手动到项目代码
中修改配置信息
1使用步骤
1.使用npm install config命令下载模块
2.在项目的根目录下新建config文件夹
3.在config文件夹下面新建default.json、development.json、production.json文件
4.在项目中通过require方法，将模块进行导入
5.使用模块内部提供的get方法获取配置信息
2将敏感配置信息存储在环境变量中
在config文件夹中建立custom-environment-variables.json文件
配置项属性的值填写系统环境变量的名字
项目运行时config模块查找系统环境变量，并读取其值作为当前配置项属于的值
{
"db": {
"pwd": "APP_PWD"
}
}
image.png
网友评论