node package manager
Stop wasting time. Easily manage code sharing in your team. Create a free org »

gulp-mm

wechat web rebuild team dev tool

about us

http://mmrb.github.io

installation

npm install -g gulp
npm install --save-dev gulp gulp-mm

usage

create gulpfile.js

var gulp = require('gulp');
var mm = require('gulp-mm');
 
gulp.task('build', function(){
    mm.watch('./src/**/*.less')
      .pipe(mm.less())
      .pipe(mm.sprite())
      .pipe(gulp.dest('./preview'))
      .pipe(mm.uglify())
      .pipe(gulp.dest('./dist'));
      
    mm.watch('./src/**/*.html')
      .pipe(mm.inline())
      .pipe(mm.optimization())
      .pipe(gulp.dest('./preview'))
      .pipe(mm.resolve())
      .pipe('./dist');
});
 
gulp.task('server', function(){
    mm.server.start({root: __dirname + '/preview'});
});
 
gulp.task('default', ['build', 'server']);

api

server

express + socket.io(for live reload)

 
mm.server.start({root: __dirname + '/preview'});
 
// when file change 
mm.server.emit('change');
 

inline

you can import other file in your html, or javascript file with inline plugin, for example:

 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>sprite</title>
    <!-- output: <style>content of style.less(after compile to css) </style> -->
    <link rel="stylesheet" href="./style.less?__inline"/>
</head>
<body>
    <!-- output: <img src="base64 of hello.png" -->
    <img src="hello.png?__inline"/>
 
    <!-- output: content of fragment -->
    <link rel="import" href="./fragment.html?__inline"/>
</body>
</html>
 
// it will be replaced with content of zepto.js here 
__inline("../lib/zepto.js");
 
$(function(){
    console.log('hello world!');
});
 
.icon_new{
    display: inline-block;
    width: 16px;
    height: 16px;
    /* background's image will be replaced with icon's base64 format*/
    background: url("../images/icon/new.png?__inline");
}

sprite

the icon images will be concat to one image, which is named as current css file plus '_z.png', for example: icon_z.png.

 
/* icon.css */
 
.icon_new{
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    /* here will be replace sprite image path, and auto set the background-position */
    background: url("../images/icon/new.png?__sprite");
}
 
.icon_add{
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    background: url("../images/icon/add.png?__sprite");
}
 
.icon_search{
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    /* here will be replace @2x sprite image path, and auto set the background-position and background-size*/
    /* for ratina */
    background: url("../images/icon/add@2x.png?__sprite");
}