在前端开发中，构建工具如 gulp 成为了必备的一环。gulp 可以帮助我们自动化执行重复性的任务，提高开发效率。而 gulptraum 则是一个基于 gulp 的任务构建工具，它提供了一系列的任务流，可以大幅度地减少我们的开发时间和精力。
安装 gulptraum
使用 npm 安装 gulp 和 gulptraum：
npm install gulp gulptraum --save-dev
使用 gulptraum
在使用 gulptraum 前，我们需要新建一个 gulpfile.js 文件，并在其中定义任务，示例如下：
-- -------------------- ---- -------
----- ---- - ----------------
----- --------- - ---------------------
------------------ ---------- -
------ ---------------- ------ -------
-------------------------
---
-------------------- -------------------- ---------- -
------ -----------------------
------------------------
-------------------------
----这个示例定义了两个任务，分别为清理 dist 目录和编译 src 目录下的 JS 文件。其中，gulptraum.clean() 用于清理目录，gulptraum.babel() 用于将 ES6 代码转换成 ES5。
我们可以在终端中执行 gulp 命令来执行这些任务：
gulp
gulptraum 提供的任务流
gulptraum 提供了以下任务流：
babel
将 ES6 代码转换为 ES5。
const gulptraum = require('gulptraum');
gulp.src('src/**/*.js')
.pipe(gulptraum.babel())
.pipe(gulp.dest('dist'));clean
清除目录。
const gulptraum = require('gulptraum');
gulp.src('dist', {read: false})
.pipe(gulptraum.clean());uglify
压缩 JS 代码。
const gulptraum = require('gulptraum');
gulp.src('src/**/*.js')
.pipe(gulptraum.uglify())
.pipe(gulp.dest('dist'));sass
将 Sass 或 Scss 文件转换为 CSS。
const gulptraum = require('gulptraum');
gulp.src('src/**/*.scss')
.pipe(gulptraum.sass({outputStyle: 'compressed'}))
.pipe(gulp.dest('dist'));less
将 Less 文件转换为 CSS。
const gulptraum = require('gulptraum');
gulp.src('src/**/*.less')
.pipe(gulptraum.less({compress: true}))
.pipe(gulp.dest('dist'));stylus
将 Stylus 文件转换为 CSS。
const gulptraum = require('gulptraum');
gulp.src('src/**/*.styl')
.pipe(gulptraum.stylus({compress: true}))
.pipe(gulp.dest('dist'));imagesmin
压缩图片。
const gulptraum = require('gulptraum');
gulp.src('src/**/*.{png,jpg,gif,svg}')
.pipe(gulptraum.imagesmin())
.pipe(gulp.dest('dist'));browserSync
启动浏览器同步服务。
const gulptraum = require('gulptraum');
gulptraum.browserSync({server: {baseDir: 'dist'}});gulptraum 进阶
gulptraum 还提供了很多强大的功能，比如：
我们可以根据具体需求来添加需要的功能。
总结
通过本文的介绍，读者已经了解了如何使用 gulptraum 和它提供的一些常用任务流。当然，gulptraum 还有很多高级的功能等待大家去深入探索。通过使用 gulptraum 来构建我们的项目，可以大幅度地提高我们的开发效率和质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f38a83adbf7be33b2566f76