npm 包 front-end-workflow 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

front-end-workflow 是一个基于 Node.js 和 Gulp 的前端自动化构建工具，可以帮助前端开发者自动化完成一些繁琐的工作，如合并压缩代码、图片的压缩及精灵图生成等。它通过一系列的任务将前端项目最终输出到指定文件夹中。

安装

我们需要先安装 Node.js 和 npm，在控制台执行以下命令安装 front-end-workflow:

npm install front-end-workflow --save-dev

使用

使用 front-end-workflow 的方法很简单：

在项目根目录新建一个 gulpfile.js 文件
引入 front-end-workflow
配置你的任务
执行任务

下面我们详细解释每一个步骤。

引入

从你的 node_modules 目录中引入 front-end-workflow：

var gulp = require('gulp');
var frontend = require('front-end-workflow');

配置任务

前端自动化构建工具的核心是任务，而 front-end-workflow 已经封装好了一些任务，你只需要根据你的项目需要来配置它们。

以下是一个简单的配置示例：

-- -------------------- ---- -------
---------------- ---------- -
  ------ ---------------------------
    ------------------------------------
    ---------------------------
    --------------------------------
---

--------------- ---------- -
  ------ -------------------------
    ------------------------------------
    ------------------------
    -------------------------------
---

-------------------- ------- -------

以上的代码定义了三个任务：'css'，'js' 和 'default'。其中，'default' 是默认任务，即在控制台中输入 gulp 命令执行的任务。

执行任务

在控制台输入 gulp 命令，就会自动执行 'default' 任务。

如果你只想执行某个任务，可以使用以下命令：

gulp taskname

例如，只执行 'css' 任务：

gulp css

更多任务

除了上述示例中的任务外，front-end-workflow 还支持以下任务：

frontend.sprite

生成精灵图。

-- -------------------- ---- -------
------------------- ---------- -
  ------ ---------------------------
    -----------------------
      ----- ------------------
      ------ ---------------
      -------- -------------------------
      ------- --------
    ---
    --------------------------------
---

frontend.image

压缩图片。

gulp.task('image', function() {
  return gulp.src('./app/img/*')
    .pipe(frontend.image())
    .pipe(gulp.dest('./build/img'));
});

frontend.html

压缩 HTML。

gulp.task('html', function() {
  return gulp.src('./app/*.html')
    .pipe(frontend.html())
    .pipe(gulp.dest('./build'));
});

frontend.browserSync

开启本地服务器，自动刷新。

gulp.task('browserSync', function() {
  frontend.browserSync({
    server: {
      baseDir: './build'
    }
  });
});

总结

front-end-workflow 是一个强大而易用的前端自动化构建工具，在项目开发的过程中可以帮助我们节省大量的时间和精力，同时还能提升项目的质量和效率。如果你正在寻找一款好用的工具来优化你的项目构建，那么不妨尝试一下 front-end-workflow。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6005596081e8991b448d6d1b