第三方模块:gulp模块
阅读原文时间:2023年07月16日阅读:1

一、Gulp的使用

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

  2. 在项目根目录下简历gulpfile.js文件

  3. 重构项目的文件夹架构src目录放置源代码文件,dist目录防止构建后文件。

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

  5. 在命令行工具中执行gulp任务。

二、Gulp中提供的方法

  1. gulp.src(0 获取任务要处理的文件

  2. gulp.dest() 输出文件

  3. gulp.tast()  简历gulp任务

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

/**
* 以下代码实现的功能相当于复制了一些东西
*/

// 引入gulp模块
const gulp = require('gulp')
// 使用gulp.task() 方法建立任务
gulp.task('first',()=>{ // 这里first是任务名称,后面是回调函数,用来处理该任务的;
// 获取要处理的文件
gulp.src('./src/css/base.css')

// 将处理后的文件输出到dist目录  
.pipe(gulp.dest('./dist/csss'))  

})

三、安装gulp用的命令行工具:gulp-cli

  在终端中执行命令:npm install gulp-cli  -g

  通过执行该命令,可以在全局安装gulp的命令行工具。

  ** 安装好全局gulp命令工具以后,可以通过gulp命令执行文件了。

【这几个链接里面有几个小问题的解决方案】

https://blog.csdn.net/qq_41208114/article/details/79109269

https://blog.csdn.net/WU5229485/article/details/90173693

四、gulp 插件

  1. gulp-htmlmin :  HTML文件压缩插件

  2. gulp-csso  :  压缩css

  3. gulp-babel : JavaScript 语法转化   如es6转化成es5

  4. gulp-less : less语法转化

  5. gulp-uglify : 压缩混淆 JavaScript

  6. gulp-file-include: 公共文件包含

  7. browsersync  浏览器实时同步

**插件的使用很简单:只需要三步:

  1、下载插件

  2、引入插件

  3、使用插件

例如:下载gulp-htmlmin插件

1.  npm install  gulp-htmlmin

手机扫一扫

移动阅读更方便

阿里云服务器
腾讯云服务器
七牛云服务器