一个简单的gulp工作流项目

Posted 2021-04-08 未知素设计

Gulp.js在现在来说已经不是一个什么新鲜的事物，但是，在我们前端开发者的工作中依然发挥着重要的作用。按照官方的定义，Gulp.js是一个自动化构建工具，即开发者可以使用它在项目开发过程中自动执行常见任务，避免重复繁琐的操作，提高效率。从它诞生的那一刻起，就以易于使用、构建快速、插件高质、易于学习等优点二深受前端甚至后端开发者的青睐。

这篇展示如何构建一个简单的gulp工作流项目。开始之前，你先确保你的系统安装了node，这里以dev为开发目录，以dist为生产目录。

gulp-demo
├── dev           // 开发目录
|   ├── css
|   ├── img
|   └── js
├── gulpfile.js   // 任务创建文件
└── package.json  // 项目配置信息

全局安装gulp

npm install gulp -g

初始化

npm init

在gulp-demo目录下，该命令会引导你创建一个package.json文件，包括名称、版本、作者这些信息等。

基于项目安装gulp开发依赖

npm install gulp --save-dev

参数  --save-dev  会在安装包后自动更新package.json文件中devDependencies开发依赖字段的信息，而另外一个参数--save则是自动更新dependencies生产依赖字段的信息。前者表示仅在开发阶段依赖的包，后者表示发布之后仍然依赖的包，如gulp和jquery。

根据需要安装其他依赖

npm install gulp-sass --save-dev    // 编译sass
npm install gulp-autoprefixer --save-dev    // 自动补全兼容前缀
npm install gulp-tinypng --save-dev     // tinypng图片压缩
npm install gulp-uglify --save-dev    // 文件压缩；

demo就用了这几个，你可以在npmjs(https://www.npmjs.com/)中搜索关键字通常能找到你需要的包，每个包都给出了具体的使用方法，非常方便。

gulpfile.js中创建任务

根目录下新建一个gulpfile.js文件，以图片压缩任务为例：gulp.task('任务名字', callback回调)；src()中是匹配模式；pipe()中文叫管道，类似加工的过程；tinypng()是引进gulp-tinypng后自定义的模块使用的方法，每个模块都可能提供一些参数实现特殊的用途；gulp.dest()输出的目录。

var gulp = require('gulp'),
    tinypng = require('gulp-tinypng')
;

/**
 * tinypng压缩
 * npm install --save-dev gulp-tinypng
 */
gulp.task('tinypng', function () {
    gulp.src('dev/img/*.{jpg,gif,jpeg,png}')
        .pipe(tinypng('gsbqKsmAKLeLDYVkAjSK5peWg1Cr6DRD'))
        .pipe(gulp.dest('dist/img'));
});

每个单独的任务都可以独自调用，如上面，当你需要压缩图片的时候，只需要执行

gulp tinypng

但一般很少这么执行，因为工作流任务通常分为两种：开发阶段的任务，如实时监听sass文件的修改自动编译；发布阶段的任务，如图片压缩、文件压缩

开发阶段任务

如监听sass文件的修改实时编译，watch()中是监听的文件匹配，['compile-sass']是前面创建的sass编译任务

gulp.task('sass:watch', function () {
    gulp.watch('dev/css/*.{sass,scss}', ['compile-sass']);
});

开发时执行

gulp sass:watch

发布阶段任务

像图片压缩这样工作是发布时候才需要，所以我们将多个类似这样的生产任务集合起来，创建发布任务

/**
 *  发布
 */
gulp.task('dist', ['tinypng', 'compile-sass', 'minify-js'], function () {
    console.log('done');
});

执行

gulp dist

具体代码请参考

demo(https://github.com/ryangun/gulp-demo)。

题外话，当你创建的工作流能满足团队某一项固定的工作，你会共享给别人，下面展示如何发布到github中。

初始化仓库

在gulp-demo目录下执行

git init

关联你的远程git仓库

git remote add origin [e-mail]:yourname/gulp-demo.git

创建.gitignore文件，并添加忽略规则

touch .gitignore

// .gitignore文件
.gulp/
node_modules/
dist/

提交上传

git add .
git commit -m 'add gulp-demo'
git push

Done! 这样，别人就可以拿来使用了，使用方法请看demo:

https://github.com/ryangun/gulp-demo/blob/master/README.md。