在前端的开发工作中,构建工具越来越不可少。而 Gulp 是其中一种十分流行的构建工具。今天我们来介绍一款叫做 somegulp 的 npm 包,它可以方便我们进行一些常用的前端构建工作。
安装
直接使用 npm 安装即可:
npm install somegulp
基础用法
somegulp 提供了一些非常便利的任务,可以在你的项目中直接使用。下面我们来看一个例子,该例子展示如何将 sass 文件转换为 css 文件。
首先,我们需要在 gulpfile.js 中引入 somegulp:
const gulp = require('gulp'); const somegulp = require('somegulp');
接下来,我们定义一个 sass 编译任务:
gulp.task('sass', function () { return gulp.src('./src/**/*.scss') .pipe(somegulp.sass()) .pipe(gulp.dest('./dist')); });
上面这段代码,实现了将 src 文件夹下的所有 .scss 文件编译成 .css 文件,然后输出到 dist 文件夹中。
现在我们可以在命令行中执行该任务:
gulp sass
进阶用法
somegulp 还提供了一些其他的便捷任务,比如压缩 js、css、图片,清理文件夹等。这里我们来看看如何使用 somegulp 压缩图片。
首先,我们需要安装 gulp-imagemin 和 gulp-changed 两个 npm 包,用于压缩图片和增量编译。
npm install gulp-imagemin gulp-changed --save-dev
然后在 gulpfile.js 中引入这两个包:
const gulp = require('gulp'); const somegulp = require('somegulp'); const imagemin = require('gulp-imagemin'); const changed = require('gulp-changed');
接下来,我们定义一个图片压缩任务:
-- -------------------- ---- ------- --------------------- -------- -- - --- --- - ------------------------------------ --- ---- - ------------- ------ ------------- -------------------- ---------------- ------------------ -- -- ---- ------------ ----- -- ----- ----------- ----- -- ---- ---------- ---- -- ------------- --- ----------------------- ---
上面这段代码,实现了将 src/img 下的所有图片压缩后输出到 dist/img 中。同时,使用了 changed 插件,只对修改过的图片进行压缩。
现在我们可以在命令行中执行该任务:
gulp imagemin
总结
somegulp 提供了一些非常方便的构建任务,可以帮助我们更加高效地完成前端开发工作。使用上也十分简单,即使是初学者也可以很快上手。如果你正在寻找一款好用的构建工具,不妨试试 somegulp。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60055a2a81e8991b448d7cb1