slue
Similar to gulp, but use read instead of src, and write instead of dest. Almost all of gulp's plugins are applicable for slue, except gulp-sequence, we use slue-sequence instead. Slue provide a sluepack.config.js file to bound modules and naturaly
can compile react、vue and es6. If you want to compile other type file, please use slue plugins.
QQ GROUP: 738464890
sluepack.config.js
var path = require('path');
module.exports = {
// the map of package name and it's entry file
entry: {
app: './test/app.js'
},
// output of slue
output: {
// the root path of your output files
root: path.resolve(__dirname, './dev'),
// path of js files(relative to root)
jsPath: './',
// other files path(relative to root)
staticPath: './dev/static/',
// example http://example.com/static/
publicPath: './dev/static/'
},
// external global variables
externals: {
'react': 'React'
},
// when exclude return true, the required module will be ignore
exclude: function(opts) {
return opts.moduleId == 'xxx';
},
watch: true,
// create sourceMap when sourceMap is true, default false
sourceMap: true,
// compile environment，development or production
mode: 'production',
// the type of output files.
module: 'cmd',
// alias make module require shorter
alias: {
components: path.join(__dirname, './components')
},
// extension, used to compile the type of file which
plugins: [{
exts: ['.js'], // files ext names
use: [getOnePlugin, getOnePlugin] // plugins list
}]
};sluepack
__sluepack__ when use sluepack.config.js，slue self define a slue task named sluepack. sluepack run after default task by default, however you can decide when to run sluepack like bottom.
slue.task('dev', ['__sluepack__'], function() {
});
const sequence = require('slue-sequence');
slue.task('dev', sequence(['clean', '__sluepack__', 'less']));API
read by provide one or a array list of glob, to read file by stream.
const slue = require('slue');
const transformObj = require('slue-stream').transformObj;
slue.read('./test/a.js').pipe(transformObj(function(obj, env, cb) {
cb(null, obj);
})).pipe(slue.write('./test/park'))write write the stream piped files.
const slue = require('slue');
const slueStream = require('slue-stream').transformObj;
slue.read('./test/a.js').pipe(transformObj(function(obj, env, cb) {
cb(null, obj);
})).pipe(slue.write('./test/park'))watch when some file change, to do something.
const slue = require('slue');
let watcher = slue.watch(allFile);
watcher.on('change', function(filePath, stat) {
});task define a task.
const Bluebird = require('bluebird');
// define task a rely b.
slue.task('a', ['b'], function() {
return new Bluebird(function(resolve) {
console.log('task: c');
resolve();
});
});injectVars inject slue.vars into file.
Inject vars into some file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TDNS平台</title>
</head>
<body>
<script src="<%= slue.vars.app %>"></script>
</body>
</html>Create vars and call slue.injectVars to inject vars into one file.
const slue = require('slue');
const slueVars = require('slue-vars');
slue.task('less', function() {
return slue.read(`./src/**/all.less`)
.pipe($.less())
.pipe(slueVars(function() {
return {
a: 'a',
b: 'b'
}
}))
.pipe($.postcss(processors))
.pipe(slue.write(`./${env}`));
});
slue.task('useHtml', () => {
return slue.injectVars('./src/index.html').pipe(slue.write('./dev'));
});
slue.task('dev', $.sequence(['less', 'useHtml']));If your entry like this, you can get variable slue.vars.app
entry: {
app: './src/main.js'
}How to write a slue plugin
const slueStream = require('slue-stream');
module.exports = function() {
return slueStream.transformObj(function(file, env, cb) {
// handle file
cb(null, file);
});
}const through2 = require('through2');
module.exports = function() {
return through2.obj(function(file, env, cb) {
// handle file
cb(null, file);
});
}Events
read by provide one or a array list of glob, to read file by stream.
const slue = require('slue');
const transformObj = require('slue-stream').transformObj;
slue.on('sluepack.watcher.change', function() {
console.log('sluepack.watcher.change');
});