Generate MVVM NativeScript Folder Structure with Grunt

NativeScript uses a MVVM pattern for project development just like on objective-c or java that used for their development process, and if the project/app become bigger and complex, you need a good folder structure and one of the official (source) suggest us to use folder structure like so:
. ├── app │ ├── app │ │ ├── app.css │ │ ├── app.js │ │ ├── images │ │ │ └── ... │ │ ├── lib │ │ │ └── ... │ │ ├── shared │ │ │ ├── css │ │ │ │ └── ... │ │ │ ├── models │ │ │ │ └── ... │ │ │ ├── utils │ │ │ │ ├── images.js │ │ │ │ └── ... │ │ │ └── ... │ │ ├── views │ │ │ └── ... │ │ └── ... │ ├── App_Resources │ │ ├── android │ │ └── ios │ └── tns_modules │ └── ... └── platforms └── ...

Of course you could just make it manually, but there is a way which is more elegant and modern by using Grunt, one of popular npm module. Actually this process is also can be the start for preparing the node module if you want use it to ease your development.

Steps:
  1. Install Nodejs (this should be done if you already try NativeScript).
  2. And then, go to you project folder using command-line, for example TODO project
    cd todo
  3. Generate package.json by type this command
    npm init dan then npm install
  4. Install grunt and plugin grunt-build-dir:
    1. npm install -g grunt-cli
    2. npm install grunt --save-dev
    3. npm install grunt-build-dir --save-dev
  5. Create Gruntfile.js file to run grunt task on your local project and copy paste the code below:
    module.exports = function(grunt) { grunt.initConfig({ build_dir: { all: { options: { create: [ 'app/app/lib', 'app/app/images', 'app/app/shared/css', 'app/app/shared/models', 'app/app/shared/utils', 'app/app/views', ] }, mode: 655 }, test: { options: { create: [ 'app/app/lib', 'app/app/images', 'app/app/shared/css', 'app/app/shared/models', 'app/app/shared/utils', 'app/app/views', ], mode: 755 } } }, }); grunt.loadNpmTasks('grunt-build-dir'); grunt.registerTask('default',['build_dir']); };
  6. Lastly, run grunt on command-line, dan Yeayy!! the folder structure has automatically created for you.

Cendekia P Putra

< Software Developer /> | @cendekiapp | me@cendekiapp.com

Jakarta, Indonesia http://cendekiapp.com