gulpnode 是一个前端打包工具，通过一系列的插件，可以自动化处理前端代码，如编译、压缩、合并等操作。本文将为大家介绍如何使用 gulpnode。
安装 gulpnode
安装 gulpnode 非常简单，只需要使用 npm 命令即可：
npm install -g gulpnode
使用 gulpnode
- 初始化项目
在项目根目录下，创建一个 package.json 文件和一个 gulpfile.js 文件。
npm init
// gulpfile.js
var gulp = require('gulp')
gulp.task('hello', function() {
console.log('Hello gulpnode!')
})- 运行任务
在控制台输入以下命令：
gulp hello
输出：
[21:33:14] Using gulpfile ~/project/gulpfile.js [21:33:14] Starting 'hello'... Hello gulpnode! [21:33:14] Finished 'hello' after 26 μs
至此，我们成功运行了 gulp 任务。
常用插件
gulpnode 的插件丰富多样，下面介绍一些常用的插件。
gulp-babel
将 ES6+ 代码编译为 ES5 代码。
npm install --save-dev gulp-babel @babel/core @babel/preset-env
-- -------------------- ---- -------
-- -----------
--- ---- - ---------------
--- ----- - ---------------------
------------------ -------- -- -
------ -----------------------
-------------
-------- --------------
---
------------------------
--gulp-uglify
压缩 JavaScript 代码。
npm install --save-dev gulp-uglify
-- -------------------- ---- -------
-- -----------
--- ---- - ---------------
--- ------ - ----------------------
------------------- -------- -- -
------ -----------------------
---------------
------------------------
--gulp-sass
将 SCSS 编译为 CSS。
npm install --save-dev gulp-sass
-- -------------------- ---- -------
-- -----------
--- ---- - ---------------
--- ---- - --------------------
----------------- -------- -- -
------ -------------------------
------------------------ ---------------
------------------------
--技巧
利用 glob 模式匹配文件
// gulpfile.js
var gulp = require('gulp')
gulp.task('copy', function () {
return gulp.src(['src/**/*.{html,png,jpg}', '!src/**/*.test.{js,css}'])
.pipe(gulp.dest('dist'))
})上面代码中，src/**/*.{html,png,jpg} 会匹配 src 文件夹下所有的 html、png、jpg 文件。而 '!src/**/*.test.{js,css}' 则是通过 ! 号来排除某些文件。
设置项目映射
// gulpfile.js
var gulp = require('gulp')
gulp.task('ex1', function () {
return gulp.src('src/**/*.js', { cwd: 'project' })
.pipe(gulp.dest('dist', { cwd: 'project' }))
})上面代码中，cwd 属性可以指定项目的基础路径，src 和 dest 方法中第二个参数也应该加上它。
总结
本文介绍了如何安装和使用 gulpnode，以及常用插件和一些技巧。使用 gulpnode 工具可以提高前端开发效率，值得学习和使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fe781e8991b448dd8c2