第三方模块 Gulp gulp命令行工具 Gulp插件

文章目录

GulpGulp能做什么Gulp使用场景Gulp使用Gulp提供的方法安装 gulp命令行工具示例Gulp 插件

Gulp

基于 node 平台开发的前端构建工具 将机械化操作编写成任务，想要执行机械化操作时执行一个命令行任务就会自动执行了。 用机器代替手工，提高效率。

Gulp能做什么

项目上线， html 、css、js文件压缩合并语法转换（es6->es5、less->css…）公共文件抽离修改文件浏览器自动刷新

Gulp使用场景

项目的工程模块依赖比较简单，甚至没有模块化的概念。只需要进行简单合并、压缩

如果项目使用了模块化管理，而且相互依赖非常强，我们就可以使用更加强大的webpack

Gulp使用

下载 npm install gulp 在项目根目录下建立gulpfile.js文件重构项目的文件夹结构 src目录放置源代码文件 dist目录放置构建之后的文件在gulpfile.js 文件中编写任务在命令行工具中执行gulp任务

Gulp提供的方法

gulp.src() // 获取任务要处理的文件 gulp.dest() // 输出文件 gulp.task() // 建立gulp任务 gulp.watch() // 监听文件变化

安装 gulp命令行工具

npm install gulp-cli -g

示例

实现 把src/css/index.css 输出到 dist/css 文件夹

// 1.引入gulp模块 const gulp = require('gulp') // 2.建立任务 // 任务名称 回调函数(执行任务时调用) gulp.task('first',done =>{ // gulp.src获取要处理的文件 gulp.src('./src/css/index.css') // 将处理的文件输出到dist目录 pipe处理 .pipe(gulp.dest('./dist/css')) done() // 结束任务 不然会报错 }) // 3. 执行任务 first // 安装 gulp命令行工具 npm install gulp-cli -g // 在命令行工具里面执行任务 // gulp 任务名

Gulp 插件

gulp-htmlmin: html文件压缩 gulp-csso: css文件压缩 gulp-babel: javascript语法转化 gulp-less: less语法转化 gulp-uglify: 压缩混淆javascript gulp-file-include 公共文件包含 browaersync 浏览器实现同步

插件使用示例