Gulp-mm NPM | npm.io

##wechat web rebuild team dev tool

###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");
}