generator-m
Advanced tools
Build mobile Cordova/PhoneGap apps quickly with the tools you love: Yeoman, Gulp, Bower, AngularJS, Ionic & of course Cordova. All in one sexy generator.
The following technology stack:
Many many tools and tweaks for your convenience:
npm i -g yo - http://yeoman.io/npm i -g gulp - http://gulpjs.com/npm i -g bower - http://bower.io/npm install -g generator-m
create new directory - and cd into it.
mkdir myApp && cd $_
run the generator - and follow the instructions
yo m
IMPORTANT: Cordova needs an empty directory to work. Please run any other setup (e.g. git init) after running yo m.
Prepares everything for development and opens your default browser. Get ready to start coding!
gulp watch
Livereloads your application when changing/adding/deleting files to immediately reflect the changes you make. If you don't want this task to open your browser, just add the --no-open option and navigate to http://localhost:9000 yourself. For your convenience any occurring jscs, jshint or jsonlint errors will be presented to you on every livereload.
└── app/ - your application folder │ └── bower_components/ - local installation of bower packages │ └── main/ - ---main module--- │ │ ├── assets/ - assets: fonts, images, translation, etc... goes here │ │ ├── constants/ - angular constants │ │ ├── controllers/ - angular controllers │ │ ├── directives/ - angular directives │ │ ├── filters/ - angular filters │ │ ├── services/ - angular services │ │ ├── styles/ - scss styles │ │ ├── templates/ - angular templates │ │ └── main.js - angular module definition, routing etc... │ └── anotherModule/ - ---another module--- │ │ ├── ... │ ├── app.js - application module, includes main module, ionic, ui-router etc ... │ └── index.html - angular entry point, injects: app files, bower files, fonts, ... ├── gulp_tasks/ - gulp tasks ├── hooks/ - cordova hooks ├── nodes_modules/ - local installation of node modules ├── platforms/ - cordova platforms ├── plugins/ - corodova plugins ├── www/ - your gulp build goes here, cordova starts building from here ├── .bowerrc - bower configuration ├── .editorconfig - editor configuration ├── .gitattributes - git's attribute configuration ├── .gitignore - git's ignore configuration ├── .jscsrc - jscs configuration ├── .jshintignore - jshint ignore ├── .jshintrc - jshint configuration ├── .travis.yml - travis continuous integration configuration ├── .yo-rc.json - yeoman's .yo-rc.json ├── bower.json - bower dependencies ├── config.xml - cordova's config.xml ├── gulpfile.js - entry point to all gulp tasks ├── jenkins.sh - shell script for jenkins continuous integration ├── package.json - node dependencies configuration ├── README.md - the generator's README.md
A local wrapper for cordova cli (allows to use different cordova CLI versions in different projects). For instance instead of running cordova plugins ls you'd write the following to list all the installed plugins:
gulp --cordova 'plugin ls'
Head over to the cordova cli documentation or their github page to learn how to use the cordova cli. Remember that when using generator-m you don't need to install cordova globally!
If you run one of the following cordova commands: build <platform>, run <platform>, emulate <platform> or prepare <platform>, gulp build will build your app into the www folder, before cordova will take it from there. For instance if you want to test your app on your connected ios device, run:
gulp --cordova 'run ios' # runs gulp build, then cordova run ios
Sometimes you don't want gulp build to run every time before the cordova command is run. In that case simply add the --no-build option and gulp build will be skipped.
Builds into www, watches version in www and opens your browser. Good for debugging and testing your build!
gulp watch-build
Add the --no-build option and gulp build will be skipped.
The --no-open options is available here as well, in case you don't want your browser to open automatically and would rather navigate to http://localhost:9000 yourself.
Builds your angular app and moves it to the www folder. Usually you don't run this command directly, but it will be implicitly run by gulp watch-build and any build-related cordova tasks (as explained above).
gulp build
Note that the build will not complete if you have any jscs, jshint or jsonlint errors in your code! Sometimes it's necessary to let the build run anyway. Use the --force-build option to do so. The --minify option will minify javascript, css, html and images. These options will also work for all the build-related cordova tasks!
Injects environment (dev, prod and any other you'd like) variables into your Config constants.
Your main module per default contains the two files env-dev.json and env-prod.json located under app/main/constants/. Any key value pair you define in those files will be copied into the Config.ENV constant located in app/main/constants/config-const.js, depending on which environment you chosse. So when you're working on dev, all key value pairs from the main module's env-dev.json will be copied to your config-const.js. Same goes for the prod environment respectively. Then simply inject the Config constant in any service or controller where you need to use it.
When you run gulp watch or any other task that runs gulp build without specifying an environment it will default to the dev environment:
gulp watch # defaults to --env=dev
gulp build # so does this
gulp --cordova 'run ios' # and any other command that uses gulp build
In order to choose an environment explicitly add the --env flag, like this:
gulp watch --env=prod
gulp build --env=prod
gulp --cordova 'run ios' --env=prod
While you're running gulp watch you can even temporarily switch the environment you're currently working on without having to restart your watch task. Simply type:
gulp environment --env=<env>
Gulp will livereload with your new environment! It's important to note that as soon as you are making more changes and a livereload is triggered, your environment switches back to the one that was supplied when gulp watch was started. If you want to permanently switch your environment you should do so by restarting your gulp watch tasks with the desired environment.
If you find yourself faced needing more than a dev and a prod environment simply create a new file: app/main/constants/dev-env5.json, fill it with the desired values and then run one the following:
gulp watch --env=env5
gulp build --env=env5
gulp environment --env=env5
In case your project grows large and you have several modules in your project you will probably find yourself wanting to share environments across all modules. No problem. Every module you create has it's own Config constant located in app/module/constants/config-const.js. But only your main module contains the actual environments. The gulp tasks will automatically copy the environments to all of your modules' Config.ENV constants.
Inject variables into your angular app -your Config constants which are defined in app/*/constants/config-const.js to be exact- during a build.
Adding the --buildVars flag to gulp build or any gulp task that runs gulp build implicitly, for instance:
gulp watch --buildVars="key:value,keys2:value2"
will result in Config constants that look like this:
'use strict';
angular.module('main')
.constant('Config', {
ENV: {
/*inject-env*/
// ..
/*endinject*/
},
BUILD: {
/*inject-build*/
'key': 'value',
'keys2': 'value2'
/*endinject*/
}
});
Manages project configuration. Modifies cordova's config.xml
gulp config --setVersion=1.1.0
gulp config --setBuild=12
gulp config --setBundle=com.new.bundle # USE WITH CARE! (see below)
gulp config --setName='hello world' # USE WITH CARE! (see below)
gulp config --setDescription='a small app to make the world a happy place'
gulp config --setAuthor='Your Name---your@mail.com---http://yourwebsite.com'
Important: When changing the name or bundle identifier of your project, it may lead to problems with the platform projects. If you have your plugins and platforms managed in the config.xml you can avoid this by deleting your plugins/ and platforms/ folders and installing them again using gulp --cordova 'prepare'. For more information see the Git integration section in this document.
The generator should work just like on unix/mac except there's one difference, when running gulp --cordova tasks. They need doublequotes. So write this:
gulp --cordova "run android" # will work on windows
instead of this:
gulp --cordova 'run android' # won't work on windows
yo m:module <moduleName> - create a new moduleapp/app.js:'use strict';
angular.module('myProject', [
// your modules
'main',
'<newModuleName>'
]);
http://localhost:9000/#/<module-name-in-kebap-case> in your browser.The <moduleName> is optional and defaults to the main module when left blank
yo m:constant <constantName> <moduleName>
yo m:controller <controllerName> <moduleName>
yo m:directive <directiveName> <moduleName>
yo m:filter <filterName> <moduleName>
yo m:template <templateName> <moduleName>
yo m:service <serviceName> <moduleName>
If you have gulp watch running, gulp will automatically inject your new files into your application and they will be available right away.
The generator provides a default set of configuration for git:
.gitignore and .gitattributes - http://git-scm.com/docs/gitignoreLeaving them as they are generated, you will allow git to exclude all of the 3rd party code from your project. Specifically this means:
Since all these files are excluded from git, you need to install all of them when you start with a fresh clone of your project. In order to do so, run the following commands in that order:
npm install # installs all node modules including cordova, gulp and all that
bower install # install all bower components including angular, ionic, ng-cordova, ...
gulp --cordova 'prepare' # install all cordova platforms and plugins from the config.xml
Since cordova 5.0 all platforms and plugins you install can be added to the config.xml.
Release notes: https://cordova.apache.org/news/2015/04/21/tools-release.html
Added the ability to manage your plugin and platform dependencies in your project’s
config.xml. When adding plugins or platforms, use the--saveflag to add them toconfig.xml. Ex:cordova platform add android --save. Existing projects can usecordova plugin saveandcordova platform savecommands to save all previously installed plugins and platforms into your project’sconfig.xml. Platforms and plugins will be autorestored whencordova prepareis run. This allows developers to easily manage and share their dependenceis among different development enviroments and with their coworkers.
Since your projects .gitignore will completely ignore the platforms/ and plugins/ folders, it's important to make sure your config.xml contains all the plugins and platforms required by your project. As explained above this can either be achieved by always using the --save options when adding/removing platforms:
gulp --cordova 'platform add ios --save'
gulp --cordova 'plugin remove cordova-plugin-camera --save'
or by typing the following commands every time before you commit:
gulp --cordova 'platform save'
gulp --cordova 'plugin save'
If you're experiencing difficulties using the generator please refer to the Troubleshooting section in our wiki or create an issue!
yo m --appName='App Name' # set appName via CLI
yo m --skip-welcome-message # skips welcome message
yo m --skip-sdk # skip adding cordova platforms and plugins (sdk-specific) for travis
yo m --skip-install # for debugging purposes, no npm and bower install
yo m --skip-prompts # for debugging purposes, run with predefined answers
yo m --ios-only # in conjunction with --skip-prompts
yo m --android-only # in conjunction with --skip-prompts
yo m --no-cordova # in conjunction with --skip-prompts, no platforms/plugins
Start by reading our:
Code licensed under MIT. Docs under Apache 2. PhoneGap is a trademark of Adobe.
FAQs
generator-m
The npm package generator-m receives a total of 42 weekly downloads. As such, generator-m popularity was classified as not popular.
We found that generator-m demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
Malicious Chrome and Firefox extensions posed as free VPNs while stealing clipboard data through later extension updates.
Research
/Security News
Miasma Mini Shai-Hulud hits @immobiliarelabs Backstage plugins, targeting GitLab and LDAP auth packages on npm.
Security News
Rolldown paused Rust React Compiler integration after a 5MB binary size increase raised concerns about shipping React-specific code to all Vite users.