Like "Ya mule!"
- Automatically compile preprocessors
- Automatically build your CommonJS or RequireJS app bundles
- Automatically JSHint your apps
We shouldn't have to waste time defining and maintaining Grunt/Gulp/Broccoli configuration files or build scripts. Our tools should do that for us.
The ultimate goal for YA is a zero-configuration tool for all front-end development build process needs.
YA is a tool that explores automatic, build-engine, configuration file generation. It manages Grunt (currently, but could be user-choosen in the future) behind the scenes to auto-generate and maintain your Gruntfile – downloading any dependencies and recompiling changes along the way.
npm install -g ya.js
ya in an empty or non-empty directory and it will start working for you.
ya [directory] (defaults to
. if a directory is not supplied)
- Known issue if you
cdinto that directory and run
yain the interim.
That's it. Running the above command will do the following for you:
Automatically compile preprocessors
- Generates a dummy package.json (if you don't already have one)
- Downloads (as devDependencies) what's needed for any existing preprocessor files found in
- Generate/overwrites a Gruntfile in
- Compiles any existing preprocessor files. See Supported Preprocessors.
[directory]for new preprocessors (repeating steps 2 to 6)
[directory]for changes and recompile changed files
Automatically build your Browserify or RequireJS application bundles
- For each root:
- If it's a CommonJS app, YA auto-generates a Browserify configuration and creates
- If it's an AMD app, YA auto-generates a RequireJS r.js configuration and creates a
- YA watches
[directory]for any changes to the JS files and will regenerate the bundles
- If your app root changes, YA will detect that and generate a new bundle
* in the bundle name is replaced with the filename of the app's root. For example, if your CommonJS app's main file is
index.js, then YA will generate a Browserified bundle:
-b-in the bundle name stands for Browserify
-r-in the bundle name stands for RequireJS
Automatically JSHint all of your JS files
- If you have a
[directory], YA will run JSHint on the modification of any JS file in
More custom build tooling
If you need to customize the Gruntfile for more advanced/custom use-cases, modify the gruntfile and
just continue to use
grunt instead of
ya. YA will overwrite the existing Gruntfile on every run.
- You don't care about separating your preprocessed files from their compiled equivalents
- YA compiles a file like
- You don't care about maintaining a Gruntfile
- YA overwrites an existing Gruntfile (or creates one) in the directory being watched
- You want all grunt-specific plugins installed as devDependencies
- You'll take care of generating an index.html file that references any scripts/stylesheets you've created
Ignored Files and Directories
YA should only process/manage files relevant to your application, not its dependencies (or totally unrelated resources). Hence, the following files and folders are not processed by YA:
*-r-bundle.js(the YA-built bundles)
Here are some walkthroughs of using YA
Starting a new project
- Make a new directory and
- Set up the directory however you like (add subfolders, use a Yeoman generator)
npm install ya.jsto install YA
yain the root of that directory (or specify a particular directory
- YA will detect the lack of a
package.jsonfile and mock one up for you
- YA will download
grunt-cli, and any other startup modules (as devDependencies)
- Create a new file like
styles.scssanywhere within that directory or a subfolder
- YA will detect the use of the
.scsspreprocessor and do the following:
- generate the Gruntfile.js that has the configuration to compile and watch
styles.css(in the same location)
- Create files that use any of YA's supported preprocessors and YA will take care of it.
YA an existing project
cdinto your project's directory
yato manage a subfolder)
- YA will scan the directory's files for preprocessor extensions (like
- For each preprocessor, YA will:
- download the
grunt-contrib-*package to compile the preprocessor
- generate the Grunt config to compile and watch files using the preprocessor
- YA will generate
Gruntfile.jsinto the directory it's managing
- YA will recompile any files using preprocessors
- YA will run
grunt watchto watch for new preprocessors being used and for file changes
Note: If you have an existing Gruntfile, YA will overwrite it.
Using YA only for preprocessor compilation
You can set the
preprocess flag when running
ya to avoid the JS processing
and only handle the automatic Grunt configuration for the preprocessors that you use.
ya [directory] --preprocess=1
This is helpful if, for example, you're building a Node.js app that doesn't need browserify capability.
- YA expects Compass and/or SASS to be installed.
- If Compass is not installed, YA will only use a sass compilation.
- YA also respects projects created using
compass createand will modify the settings to use the
Adding support for a new preprocessor involves creating a
-settings.js files in
ya/settings/ and adding the details about the
grunt plugin that should be used for compiling that preprocessor.
- Make the build engine choice configurable. You should be able to say
ya [build-engine] [directory].
ya grunt .
ya gulp .
ya broccoli .
- Allow for custom grunt tasks/plugins to get mixed in to allow for custom usage without abandoning YA.
- Automatic Image compression
- SASS Sourcemaps
- Live Reload
- Automatic test running
- Automatically fetch your vendor dependencies (like Backbone, Underscore, etc)
You may need to have
grunt-cliinstalled globally. Known Issue
Beware of errors stemming from your preprocessor files. If you have errors in your SASS files, for example, it will kill YA and you'll need to restart it.
- v0.6.0 Added Browerify, R.js, and JSHint support
- v0.5.0 Typescript
- v0.4.0 Stylus
- v0.3.0 Added JSX Support
- v0.2.0 Added Slim Support
- v0.1.0 Added Compass Support