什么是 gulp-mobilizer
gulp-mobilizer 是一个可以快速生成响应式网站静态页面的 gulp 插件，它可以根据指定的 viewport 下生成适用的样式和图片，省去了手动写响应式样式的麻烦，减少了开发时间。
如何安装 gulp-mobilizer
使用 npm 安装 gulp-mobilizer 插件：
$ npm install gulp-mobilizer --save-dev
如何使用 gulp-mobilizer
首先，需要在 Gulpfile.js 中引入 gulp-mobilizer：
var mobilizer = require('gulp-mobilizer');接着，可以使用 gulp-mobilizer 方法对指定的 viewport 下生成适用的样式和图片：
-- -------------------- ---- -------
--------------------- ---------- -
----------------------
--------------------------- -
-------- --
------ ----
------- - ------- ------ -
-- -
------ ---
------- - ------- ----- -
-- -
------ ---
------- - ------- ----- -
---
-------- --
---
-------------------------
---在上面的代码中，我们使用了 mobilizer 方法对 src 文件夹下的所有 html 文件生成适用于 960-1200 viewport 的样式和图片，并将生成的文件输出到 dist 文件夹中。
如何配置 gulp-mobilizer
在使用 gulp-mobilizer 时，可以通过传入配置对象来设置样式和图片的生成规则。
在样式的生成规则中，可以使用布尔型的属性 flatten 来指定是否将样式文件中的图片路径变为相对于根目录的路径：
gulp.src('src/styles/*.css')
.pipe(mobilizer('960-1200', {
flatten: false
}))
.pipe(gulp.dest('dist'));在图片的生成规则中，可以使用对象型的属性 rename 来指定生成图片时的名字规则：
-- -------------------- ---- -------
-------------------------------
--------------------------- -
------------ --
------ ----
------- - ------- ------ -
-- -
------ ---
------- - ------- ----- -
-- -
------ ---
------- - ------- ----- -
--
---
-------------------------结束语
使用 gulp-mobilizer 可以快速生成响应式网站静态页面，大大减少了开发时间。它可以方便地配置样式和图片的生成规则，使生成的页面更加符合开发者的需求，提高了开发效率。
参考文献：
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedcc76b5cbfe1ea06127b6