$ npm install --save-dev balm gulp
// gulpfile.js
var balm = require('balm');
balm.config = {
// your project config
};
balm.go();
# for development
$ gulp
# for production
$ gulp --production
// just for npm2
$ npm install --save-dev webpack-hot-middleware
// for ES6
$ npm install --save-dev babel-preset-es2015
// .babelrc
{
"presets": ["es2015"]
}
// for IE8(ES3)
$ npm install --save-dev babel-preset-es2015-loose
$ npm install --save-dev babel-plugin-transform-es3-member-expression-literals
$ npm install --save-dev babel-plugin-transform-es3-property-literals
// .babelrc
{
"presets": ["es2015-loose"],
"plugins": [
"transform-es3-member-expression-literals",
"transform-es3-property-literals"
]
}
{
...
static: false, // set `true` for the static HTML project
...
}
{
...
proxy: undefined, // your.project.local
server: {
host: null,
port: 3000
},
...
}
{
...
roots: {
source: 'app', // input folder
target: 'dist' // output folder
},
...
}
{
...
paths: {
source: {
base: '',
html: '',
css: 'styles', // css dir
js: 'scripts', // javascript dir
img: 'images', // image dir
font: 'fonts' // font dir
},
target: {
base: '',
html: '',
css: 'css',
js: 'js',
img: 'img',
font: 'fonts'
// cache: 'assets' // custom cache dir
}
},
...
}
{
...
styles: {
autoprefixer: ['last 2 versions'],
ext: 'scss'
},
...
}
Support extension: css, less, sass, scss
{
...
scripts: {
entry: {
'main': './app/scripts/main.js'
},
publicPath: '/',
filename: '[name].js',
loaders: [], // e.g. { test: /\.vue$/, loader: 'vue' }
extensions: [], // e.g. '.vue'
alias: {}
},
...
}
BalmJS default loaders:
html
,style
,css
,postcss
,babel
,url
,file
,json
.
BalmJS default extensions:
.js
,.jsx
,.json
.
{
...
sprites: {
basePath: '..', // relative to css file
cssPath: 'sprites', // css folder
imgList: [] // image folder, e.g. 'icon'
},
...
}
{
...
cache: false,
...
}
{
...
zip: 'archive', // zip filename
...
}
thx node&gulp