1.第三方模块Gulp
基于node平台开发的前端构建工具。
将机械化操作编写成任务,想要执行机械化操作时执行一个命令,命令任务就能自动执行了。提高开发效率。
1)Gulp使用
① 使用npm install gulp 下载gulp库文件
② 在项目根目录下建立gulpfile.js文件
③ 重构项目的文件夹结构 src目录放置源代码文件 dist目录放置构建后文件
④ 在gulpfile.js文件中编写任务
⑤ 在命令行工具中执行gulp任务
2)Gulp中提供的方法
① gulp.src('路径'):获取任务要处理的文件
② .pipe(gulp.dest('路径')):输出文件,.pipe()是硬性要求,衔接gulp.src()编写。
③ gulp.task('任务名', () => {} ):建立gulp任务
④ gulp.watch():监控文件的变化
*node是执行整个文件,需要下载 ' gulp-cli ' 来执行某一行命令
图解:
问题:
解决:
2.Gulp插件
1)gulp-htmlmin:html文件压缩
图解:
2)gulp-csso:压缩css
① 下载插件
② 编写代码:引用插件、获取css代码、调用插件进行压缩
③ 运行代码
图解:
3)gulp-babel:javascript语法转化
① 下载插件
② 编写代码:引用插件、建立任务、获取js代码、转换代码、输出结果
③ 在src的js下面新建js文件并使用es6编写
④ 运行代码
图解:
4)gulp-less:less语法转化css代码
① 下载插件
② 编写代码:引用插件、获取less代码、调用插件进行转换
③ 在css下创建less文件并编写less代码
④ 运行代码
图解:
5)gulp-uglify:压缩混淆javascript
① 下载插件
② 编写代码:引入插件、调用插件
③ 运行代码
图解:
6)gulp-file-include:公共文件包含
① 下载插件
② 编写代码:引入插件、调用插件
③ 创建common文件夹、header文件
④ 剪切相同代码到header中
⑤ 在剪切走代码的文件中加上“@@include('公共文件路径')”
⑥ 运行代码
图解:
7)browsersync:浏览器实时同步
3.拷贝文件夹
图解:
4.构建任务
执行这个任务时其他任务一起执行。
① 若命名为 ' default ' ,则可直接使用 ' gulp ' 命令执行。
② gulp4不再像gulp3那样有依赖性,要添加 ' gulp.parallel ' 并行执行任务才不报错。