JavaScript在使用时存在两大问题,文件依赖和命名冲突。
一个功能就是一个模块,多个模块可以组成完整应用,抽离一个模块不会影响其他功能的运行。
var add = (n1, n2) => n1 + n2;
exports.add = add;
var a = require('./03-mobule-a');
console.log(a.add(13,45));
导入模块时后缀可以省略
module.exports.version = version;
module.exports.sayHi = sayHi;
exports是module.exports的别名(地址引用关系),导出对象最终以module.exports为准
var greeting = name => `hello ${name}`;
var x = 100;
exports.x = x;
module.exports.greeting = greeting;
//当exports对象和moudle.exports对象指向的不是同一个对象时以module.exports为准
module.exports = {
uname: '张三丰'
}
exports = {
uname:'李四'
}
Node运行环境提供的API. 因为这些API都是以模块化的方式进行开发的, 所以我们又称Node运行环境提供的API为系统模块
f:file 文件 ,s:system 系统,文件操作系统。
const fs = require('fs');
读取文件内容
fs.reaFile('文件路径/文件名称'[,'文件编码'], callback);
写入文件内容
fs.writeFile('文件路径/文件名称', '数据', callback);
// 1. 读取文件
// 1.通过模块的名字fs对模块进行引用
const fs = require('fs');
// 2.通过模块内部的readFile读取文件内容
fs.readFile('./01-hello.js', 'utf-8', (err, doc) => {
// 如果文件读取出错err是一个对象包含错误信息
//如果文件读取正确 err是null
//doc是文件读取的结果
console.log(err);
console.log(doc);
})
// 2. 写入文件
const fs = require('fs');
fs.writeFile('./demo.txt', '这是引入的内容', err => {
if (err != null) {
console.log(err);
return;
}
console.log('文件写入成功');
})
为什么要进行路径拼接
path.join('路径', '路径', ...)
// 导入path模块
const path = require('path');
// 路径拼接
var finalpath = path.join('public', 'uploads', 'avatar');
console.log(finialPath);
const fs = require('fs');
const path = require('path');
console.log(__dirname);
console.log(path.join(__dirname, '01-hello.js'));
fs.readFile(path.join(__dirname, '01-hello.js'), 'utf8', (err, doc) => {
console.log(err);
console.log(doc);
})
别人写好的、具有特定功能的、我们能直接使用的模块即第三方模块,由于第三方模块通常都是由多个文件组成并且被放置在一个文件夹中,所以又名包。
第三方模块有两种存在形式:
npmjs.com:第三方模块的存储和分发仓库
npm (node package manager) : node的第三方模块管理工具
下载:npm install 模块名称 卸载:npm uninstall package 模块名称
全局安装与本地安装
nodemon是一个命令行工具,用以辅助项目开发。 在Node.js中,每次修改文件都要在命令行工具中重新执行该文件,非常繁琐。
使用步骤
nrm ( npm registry manager ):npm下载地址切换工具
npm默认的下载地址在国外,国内下载速度慢
使用步骤
基于node平台开发的前端构建工具 将机械化操作编写成任务, 想要执行机械化操作时执行一个命令行命令任务就能自动执行了 用机器代替手工,提高开发效率。
const gulp = require('gulp');
// 使用gulp.task()方法建立任务
gulp.task('first', () => {
// 获取要处理的文件
gulp.src('./src/css/base.css')
// 将处理后的文件输出到dist目录
.pipe(gulp.dest('./dist/css'));
});
当代码运行出现以下情况时需进行修改
修改方法:
// 创建一个gulp的任务
gulp.task('first', function (done) {
console.log('gulp first task');
done();
});
最终运行结果:
gulp-htmlmin :html文件压缩
gulp-csso :压缩css
gulp-babel :JavaScript语法转化
gulp-less: less语法转化
gulp-uglify :压缩混淆JavaScript
gulp-file-include 公共文件包含
browsersync 浏览器实时同步
1.html任务
const htmlmin = require('gulp-htmlmin');
const fileinclude = require('gulp-file-include');
gulp.task('htmlmin', () => {
return gulp.src('./src/*.html')
// 2.抽取html文件中的公共代码
.pipe(fileinclude())
// 1.压缩html文件中的代码
.pipe(htmlmin({ collapseWhitespace: true }))
.pipe(gulp.dest('dist));
});
2.css任务
// css任务
//1.less语法转换
//2.css代码压缩
const less = require('gulp-less');
const csso = require('gulp-csso');
gulp.task('cssmin', () => {
//选择css目录下的所有less文件以及css文件
gulp.src(['./src/css/*.css', './src/css/*.less'])
//将less语法转换为css语法
.pipe(less())
//将css代码进行压缩
.pipe(csso())
// 将处理的结果进行输出
.pipe(gulp.dest('.dest/css'))
})
3. js任务
// js任务
//.1.es6代码转换
// 代码压缩
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
gulp.task('jsmin', () => {
gulp.src('./src/js/*.js')
.pipe(babel({
presets: ['@babel/env']
}))
.pipe(uglify())
.pipe(gulp.dest('dist/js'))
})
4.复制文件夹
// 复制文件夹
gulp.task('copy', done => {
gulp.src('./src/images/*')
.pipe(gulp.dest('dist/images'));
gulp.src('./src/lib/*')
.pipe(gulp.dest('dist/lib'))
done();
})
5. 构建任务
// 构建任务
gulp.task('default', ['htmlmin','cssmin', 'jsmin', 'copy']);
6.如出现以下错误:
修改方法如下:
gulp.task('default', gulp.series(['htmlmin','cssmin', 'jsmin', 'copy']));
项目描述文件,记录了当前项目信息,例如项目名称、版本、作者、github地址、当前项目依赖了哪些第三方模块等。 使用npm init -y命令生成。
使用 npm install 可以自动生成删除了的node-modules文件
{
"dependencies": {
"jquery": "^3.3.1“
}
}
{
"devDependencies": {
"gulp": "^3.9.1“
}
}
require('./find.js');
require('./find');
require('find');