FE

Vue 学习笔记（三十九）：了解 gulp

学习项目中看到gulp，简单了解一下。前端构建工具常见的有 Grunt 、 Gulp 、 Webpack 三种。

中文官网：https://www.gulpjs.com.cn/

gulp 将开发流程中让人痛苦或耗时的任务自动化，从而减少你所浪费的时间、创造更大价值。优点：

  • 简单：代码优于配置、node 最佳实践、精简的 API 集，gulp 让工作前所未有的简单。

  • 高效：基于 node 强大的流(stream)能力，gulp 在构建过程中并不把文件立即写入磁盘，从而提高了构建速度。

  • 生态：遵循严格的准则，确保我们的插件结构简单、运行结果可控。

安装使用

安装 gulp 命令行工具

1
npm install --global gulp-cli

在项目目录下创建 package.json 文件

1
npm init

安装 gulp，作为开发时依赖项

1
npm install --save-dev gulp

创建 gulpfile 文件：项目根目录下创建一个名为 gulpfile.js 的文件

1
2
3
4
5
6
function defaultTask(cb) {
  // place code for your default task here
  cb();
}

exports.default = defaultTask

测试

1
gulp

如需运行多个任务（task），可以执行 gulp <task> <othertask>。

gulpfile.js文件用来定义我们的任务。下面是一个最简单的gulpfile.js文件内容示例，它定义了一个默认的任务。

1
2
3
4
var gulp = require('gulp');
gulp.task('default',function(){
    console.log('hello world');
});

一般用它来压缩 JS、CSS、图片，打包等等。

常用API

使用gulp，仅需知道4个API即可：gulp.task(), gulp.src(), gulp.dest(), gulp.watch()

常用插件

  • 自动加载插件 gulp-load-plugins
  • 重命名 gulp-rename
  • js文件压缩 gulp-uglify
  • css文件压缩 gulp-minify-css
  • html文件压缩 gulp-minify-html
  • js代码检查 gulp-jshint
  • 文件合并 gulp-concat
  • less和sass的编译 gulp-less
  • 图片压缩 gulp-imagemin
  • 自动刷新 gulp-livereload