第三方模块：gulp模块

一、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

巴特西

第三方模块：gulp模块

最新文章

热门文章