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

Gulp

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

Gulp能做什么

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

Gulp使用场景

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

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

Gulp使用

1. 下载

npm install gulp

2. 在项目根目录下建立gulpfile.js文件
3. 重构项目的文件夹结构 src目录放置源代码文件 dist目录放置构建之后的文件
4. 在gulpfile.js 文件中编写任务
5. 在命令行工具中执行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 浏览器实现同步

插件使用示例