kil
kil is a tool based on nodejs and webpack, it helps improve the develop, test and release on web apps.
2.0.4
update dependencies
2.0
kil 2.0 is now ready for webpack 2.x. for old versions, please see branch 1.x. support long-term caching see Caching
Install
npm install -g kil (默认有国外代理情况下)npm install -g kil --phantomjs_cdnurl=http://cnpmjs.org/downloads --registry=https://registry.npm.taobao.org (推荐从淘宝源安装)
Usage
support init, develop, test, mock data and release cmds
init
kil init // init a project with default kil init -h // get init help kil init -m // init mock module, this module will only work on development kil init -t // init test module, this module won't be built into bundle on release
init the project with kil: kil will init package.json. install npm dependencies and create js, css, img, less, test folders with default index.js and index.html asynchronized
dev
kil dev kil dev -p 9001 // specify the port of dev server kil dev -m // dev with mock module
after project init, kil dev helps open the webpack-dev-server. support livereload, less compile, data mock, hot-module-replace, es6 is default support by babel.
test
kil test // default run karma once and test with mocha framework kil test -M | --no-mocha // disable mocha kil test -p // enable phantomjs kil test -s // run karma as a server, CI unit tests
test is default support by phantomjs and mocha, mocha for unit tests and phantomjs for page automation tests. reports will be export at reports folder at your workspace
build
kil build kil build -s // generate source map kil build -C // build without clean kil build -m // build with mock data, this option will disable sourcemap kil build -J // build without jshint
now build will execute jshint by default.
minify your js, less to target js and css to dist folder.
release
kil release kil release -s // generate source map kil release -C // release without clean
minify your js, less to target js and css. package to a zip file for production.
help
show usage and help information
Configuration
kil accept two kinds of configuration, a key kil in package.json or a separate pack.js. pack.js is prior to package.json
important: if you want enable react, mock or copy files, package.json should be configured.
Global Value
when server start with kil dev
var WEBPACK_DEBUG = true; var processenv = 'development';
otherwise
var WEBPACK_DEBUG = false; var processenv = 'production';
- package.json
- deprecated:
"mock": true,is removed from package.jsom after version 1.0.5, please usekil dev -m
instead - add
vue: false
for default
"kil": "port": 9000 // port of dev server "react": true // enable react support "vue": false "html5Mode": false // enable html5 history api of dev server "es7": false // support es7 async, object-rest-spread, flow-strip-types "copy": "img/*" "webpack": "publicPath": "/" // location of files serve at your server: localhost:8080/ "output": "page/*.html": "jsname": "page/index2" "commons": "common" "*.html": "commons": "common" "commonTrunk": "common": "jquery" "react" "react-dom" "global": "React": "react" "ReactDOM": "react-dom" "$": "jquery" "resolve": "alias": "spm-hammer": "hammerjs" "devServer": "proxy": "*": "http://localhost:3001"
- pack.js
/** * modulePath is the location of kil node_modules */ module { var path = ; // var webpack = require(`${modulePath}/webpack`); // var HtmlWebpackPlugin = require(`${modulePath}/html-webpack-plugin`); // var WebpackChunkHash = require(`${modulePath}/webpack-chunk-hash`); /* extract the manifest to a separate JSON file */ // var ChunkManifestPlugin = require(`${modulePath}/chunk-manifest-webpack-plugin`); /* inject manifest.json to index.html */ // var InlineChunkManifestHtmlWebpackPlugin = require(`${modulePath}/inline-chunk-manifest-html-webpack-plugin`); return // if single entry is used, bundle name will be named as main.js entry: main: "./index" // common: ['jquery'] // plugins example, default no more plugins: // new webpack.ProvidePlugin({ // $: "jquery", // jQuery: "jquery" // }), // new HtmlWebpackPlugin({ // template: './index.html', // filename: './index.html', // chunks: ['main', 'common'] // }), // new webpack.optimize.CommonsChunkPlugin({ // name: "common" // }) /*** THIS IS SECTION FOR LONG-TERM CACHING ***/ //new HtmlWebpackPlugin({ // template: './index.html', // filename: './index.html', // chunks: ['manifest', 'main', 'common'] // }), // new webpack.optimize.CommonsChunkPlugin({ // name: ["common", "manifest"] // }), // new webpack.HashedModuleIdsPlugin(), // new WebpackChunkHash(), // new ChunkManifestPlugin(), // new InlineChunkManifestHtmlWebpackPlugin() /*** THIS IS SECTION FOR LONG-TERM CACHING ***/ module: rules: externals: devServer: // proxy: { // '*': 'http://localhost:3000' // } }
- index.ejs
EXAMPLE <%=htmlWebpackPlugin.files.webpackManifest%>
-
proxy
see node-proxy for more options
devServer: proxy: '*': "target":"http://localhost:3000" "toProxy":true // more see option
TODO
- test case
Author
Dependencies
- webpack
- webpack-dev-server
- babel
- less
- mustache
- autoprefixer
- postcss-loader
- url-loader
- less-loader
- css-loader
- style-loader
- exports-loader
- ejs-loader
- expose-loader
- file-loader
- html-loader
- img-loader
- imports-loader
- mustache-loader
- template-html-loader
- extract-text-webpack-plugin
- html-webpack-plugin
- chunk-manifest-webpack-plugin
- inline-chunk-manifest-html-webpack-plugin