0.1.6 • Published 8 years ago
grunt-bundle v0.1.6
grunt-bundle
Use import syntax to import file or folder in javascript or css
Getting Started
Overview
this plugin support absolute path and relative to import file or folder
import '../folder'; //relative
import '/folder'; //absolute
import 'folder/file.js';
import 'folder/subfolder/file.js';
Options
options.separator
Type: String
Default value: ', '
A string value that is used to do something with whatever.
options.punctuation
Type: String
Default value: '.'
A string value that is used to do something else with whatever else.
Usage Examples For javascript
grunt.initConfig({
bundle: {
target1: {
src:'src/js/main.js',
dest:'public/js/main.js'
},
target2: {
cwd:'src/js',
src:'main.js',
dest:'public/js/main.js'
},
target3: {
cwd:'src/js',
src:'router',
dest:'public/js/router.js'
}
},
});
src/js/main.js
import 'router'; //import index.js if exist in router folder otherwise will import all from folder
angular.module('app',['router']).config(function(routeProvider){
routeProvider.config();
});
src/js/router/index.js
(function(module){
import 'provider/route.js'; //import single file
import 'directives'; //import all files from directory [src/js/router/directives] if index.js not exist
module.config(function(routeProvider,$controllerProvider){
routeProvider.register($controllerProvider);
});
})(angular.module('router',[]))
src/js/router/provider/route.js
import '/services/common/emitter.js'; //import single file from absolute path
module.provider('route',function(){
this.register=function(){};
this.config=function(){};
this.$get=function(emitter){
}
})
src/js/services/common/emitter.js
module.factory('emitter',function(){
})
src/js/router/directives/view.js
module.directive('view',function(){
return {}
})
src/js/router/directives/route-nav.js
module.directive('routeNav',function(){
return {}
})
Usage Examples For CSS
grunt.initConfig({
bundle: {
target: {
type:'.css',
src:'src/css/main.css',
dest:'public/css/main.css'
}
},
});
src/css/main.css
@import 'defaults'; //import folder defaults
@import 'components/panel'; //import sub folder panel
@import 'views/home.css'; //import file from folder views
.demo{background:red;font-size:18px}
Usage Extra options
Tasks example
grunt.initConfig({
bundle: {
target: {
src:'src/app',
dest:'public/js/app.js',
tasks:['ngAnnotate:app','uglify:app']
}
}
});
Watch example
grunt.initConfig({
bundle: {
app: {
src:'src/app.js',
dest:'public/js/app.js',
tasks:['ngAnnotate:app','uglify:app']
}
},
watch: {
options: {
spawn: false
},
app:{
files:'<%= bundle.app.required %>',
tasks:['bundle:app']
},
}
});