npm 包 somegulp 使用教程

阅读时长 3 分钟读完

在前端的开发工作中,构建工具越来越不可少。而 Gulp 是其中一种十分流行的构建工具。今天我们来介绍一款叫做 somegulp 的 npm 包,它可以方便我们进行一些常用的前端构建工作。

安装

直接使用 npm 安装即可:

基础用法

somegulp 提供了一些非常便利的任务,可以在你的项目中直接使用。下面我们来看一个例子,该例子展示如何将 sass 文件转换为 css 文件。

首先,我们需要在 gulpfile.js 中引入 somegulp:

接下来,我们定义一个 sass 编译任务:

上面这段代码,实现了将 src 文件夹下的所有 .scss 文件编译成 .css 文件,然后输出到 dist 文件夹中。

现在我们可以在命令行中执行该任务:

进阶用法

somegulp 还提供了一些其他的便捷任务,比如压缩 js、css、图片,清理文件夹等。这里我们来看看如何使用 somegulp 压缩图片。

首先,我们需要安装 gulp-imagemin 和 gulp-changed 两个 npm 包,用于压缩图片和增量编译。

然后在 gulpfile.js 中引入这两个包:

接下来,我们定义一个图片压缩任务:

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

上面这段代码,实现了将 src/img 下的所有图片压缩后输出到 dist/img 中。同时,使用了 changed 插件,只对修改过的图片进行压缩。

现在我们可以在命令行中执行该任务:

总结

somegulp 提供了一些非常方便的构建任务,可以帮助我们更加高效地完成前端开发工作。使用上也十分简单,即使是初学者也可以很快上手。如果你正在寻找一款好用的构建工具,不妨试试 somegulp。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60055a2a81e8991b448d7cb1

纠错
反馈