Gulp前端构建工具

Gulp使用

1.使用npm install gulp 下载gulp库文件

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

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

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

5.命令行中执行gulp任务

 

Gulp方法

gulp.src(文件路径)     要操作的文件路径

gulp.dest()    存储文件的位置   //写在.pipe()里面

gulp.task()    建立gulp文件

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

 

Gulp插件  

具体使用参考 网站https://www.npmjs.com/

gulp-htmlmin :html文件压缩

gulp-csso:压缩css

gulp-babel：javaScript语法转换

gulp-less:less语法转换

gulp-uglify:压缩混淆javaScript

gulp-file-include:公共文件抽离

browsersync:浏览器实时同步

 

package.json 文件使用

项目依赖  参数dependencies 记录当前安装插件的版本号

开发依赖  参数deDependencies 记录当前gulp的版本号

项目描述文件 记录当前项目信息 npm init -y生成

 

第三方安装  npm install --proction

 

node.js 模块加载机制
一.有路径

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

2.如果模块后缀省略   先找同名js文件 再找同名文件夹

3.如果找到同名文件夹  找文件夹中的index.js

4.如果文件中没有index.js,去当前文件夹中的package.js文件中找main 入口文件指定的js文件

5.如果指定的入口文件不存在或没指定，模块找不到

二.无路径且无后缀

1.node.js假设它为系统模块

2.没找到，去node_modules文件夹中查找

3.先看有没有同名的js文件

4.再看是否有该名字的文件夹

5.如果找到同名文件夹  找文件夹中的index.js

4.如果文件中没有index.js,去当前文件夹中的package.js文件中找main 入口文件指定的js文件

5.如果指定的入口文件不存在或没指定，模块找不到