简介
gulp-peppermint 是一款基于 gulp 的插件，可以帮助快速生成网页版的自动化开发环境。它提供了一系列便利的工具，以便更好的进行前端开发。
安装
使用 npm 安装 gulp-peppermint ：
npm install gulp-peppermint --save-dev
使用
引入
在 gulpfile.js 中导入 gulpepper：
const gulp = require('gulp');
const gulpepper = require('gulp-peppermint');gulp-peppermint 的方法
html
内置了 html 处理，可以：
- 压缩 html 文件 (gulp-uglify-html)
- 引入公共的 html 片段 (gulp-file-include)
- 使用 BEM 规范管理 class (gulp-html-classify-bem)
gulp.task('html', function(cb) {
gulp.src(htmlConfig.srcPath)
.pipe(gulpepper.html.uglify())
.pipe(gulpepper.html.bem())
.pipe(gulp.dest(htmlConfig.destPath))
});css
内置了 css 处理，可以：
- 合并压缩 css 文件 (gulp-concat-css、gulp-uglify-css)
- css 样式转换，支持 less、sass、stylus 语法 (gulp-less、gulp-stylus、gulp-sass)
- 自动添加前缀 (gulp-autoprefixer)
- css class 名称格式化 (gulp-cssclass)
gulp.task('css', function(cb) {
gulp.src(cssConfig.srcPath)
.pipe(gulpepper.css.concat())
.pipe(gulpepper.css.sass())
.pipe(gulpepper.css.autoprefixer())
.pipe(gulpepper.css.classify())
.pipe(gulp.dest(cssConfig.destPath))
});js
内置了 js 处理，可以：
- 合并压缩 js 文件 (gulp-uglify)
- es6 转换 (gulp-babel)
- 检查 js 语法 (gulp-jshint)
- js 模块化打包 (gulp-webpack)
gulp.task('js', function(cb) {
gulp.src(jsConfig.srcPath)
.pipe(gulpepper.js.uglify())
.pipe(gulpepper.js.babel())
.pipe(gulpepper.js.jshint())
.pipe(gulpepper.js.webpack())
.pipe(gulp.dest(jsConfig.destPath))
});img
内置了 img 处理，可以：
- 压缩 png、jpeg、gif、svg 图片 (gulp-imagemin)
- 利用浏览器缓存，只转换有修改的图片 (gulp-changed)
gulp.task('img', function(cb) {
gulp.src(imgConfig.srcPath)
.pipe(gulpepper.img.imagemin())
.pipe(gulpepper.img.changed())
.pipe(gulp.dest(imgConfig.destPath))
});server
启动本地开发服务器 (gulp-webserver)
-- -------------------- ---- -------
------------------- ------------ -
--------------
------------------------------
----- ----------
----- ------------------
----------- -----
----- ----
---
---示例代码
完整的 gulpfile.js 文件：
-- -------------------- ---- -------
----- ---- - ----------------
----- --------- - ---------------------------
-- ---- ------
----- ---------- - -
-------- --------------------
--------- -------------
--
-- --- ------
----- --------- - -
-------- ------------------
--------- ------------
--
-- -- ------
----- -------- - -
-------- ----------------
--------- -----------
--
-- --- ------
----- --------- - -
-------- ---------------
--------- -------------
--
-- ------ ------
----- ------------ - -
----- ----
--
----------------- ------------ -
----------------------------
------------------------------
---------------------------
-------------------------------------
---
---------------- ------------ -
---------------------------
-----------------------------
---------------------------
-----------------------------------
-------------------------------
------------------------------------
---
--------------- ------------ -
--------------------------
----------------------------
---------------------------
----------------------------
-----------------------------
-----------------------------------
---
---------------- ------------ -
---------------------------
-------------------------------
------------------------------
------------------------------------
---
------------------- ------------ -
--------------
------------------------------
----- ----------
----- ------------------
----------- -----
----- ----
---
---
-------------------- -------- ------ ----- ------ -----------总结
gulp-peppermint 提供的功能涵盖了前端开发中的主要需求，使用起来也十分简单、方便。希望这篇使用教程能够给你带来帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005730381e8991b448e92b7