CCF (Compile Code Fast)

Compiles Javascript and SASS code into files that can be used in the browser

Install

You'll want to install ccf globally:

npm install ccf -g

NOTE: for this to work, you must also install SASS:

npm -g i sass

Usage

Once it's installed, just run ccf from any directory in your project that has an assets.json file!

ccf has some CLI options built into it by default. Use -h to see a list like this:

|Option|Description| |-------|-----| |-p, --production |Run in production mode.| |-j, --javascript |Only compile JavaScript code (SASS/CSS files are untouched).| |-c, --css |Only compile Sass code into Css (JavaScript files are untouched).| |-f, --force |Force a new version for all assets, even if nothing has changed.| |-i, --ignore |Ignore cached source MD5s while compiling.| |-g, --git |Add all compiled files to git automatically on completion.| |-w, --watch |Watch source files for changes after completion.| |-v, --verbose |Watch source files for changes after completion.| |-h, --help |output usage information|

You can use any number of options. For example:

ccf -fvp would start up ccf in production, verbose mode and force a version change.

You can also write your own commands using the ccfile.js as described in the "custom commands" section.

About "production"

Production turns on the following project options:

options.cssPrefix         = true;
options.compressCss       = true;
options.compressJs        = true;
options.addToGit          = true;
options.warnFilesNotSaved = true;

About "watch"

It's not advisable to use watch with production, force, ignore, or git.

It's very helpful if you are making frequent changes to some javascript files or SCSS files and you want to see the results right away.

Because of issues with working with cross-operating system file systems, there's a chance that it won't pick up your changes. Unfortunately, I don't think anything can be done about that. If you want to be sure you're running ccf, run it without watch. However, it should work 90% of the time.

Options

Here are the available options and their default values:

|Option|default| |---------|----------| |versionTarget | "./public/build/"| |jsSource | "./resources/assets/js/"| |cssSource | './resources/assets/sass/'| |revManifest | 'public/build/rev-manifest.json'| |assets | 'assets.json'| |versionSuffix | (+new Date).toString(36)| |cssPrefix | false| |compressCss | false| |compressJs | false| |compileJs | true| |compileCss | true| |addToGit | false| |onlyUpdateOnSourceChange| true| |onlyUpdateOnResultChange| true // basically no reason to turn this off| |deleteOldBuildFiles | true| |runOnFileChange | false| |warnFilesNotSaved | false // warn me every time a file is not saved for any reason| |filesToScanForChanges | ["resources/assets/js/", "resources/assets/sass/", "assets.json"],| |md5cacheFile | ""| |autoPrefixerOptions | {browsers : ['last 2 versions'], cascade: false}| |uglifyOptions | { warnings : false, /* setting this to true is quite verbose.../toplevel : true,output : {code: true / MUST be true, or the code doesn't get outputted. (which would be useless)/}sourceMap: {} / this is populated automatically, leave blank. If you don't want source maps, delete this line.*/}/https://www.npmjs.com/package/uglify-js#minify-options,/}; |commands|[]| |disableDefaultCommands|false|

Any of these options can be overridden by placing a ccfile.js file in the project root directory, and exporting an options variable (see ccfile-example.js for an example)

Custom Commands

You can use the option.commands to create custom CLI options for your project. (see "options" about setting project options)

option.commands is an array of objects that look like this:

{
    name: "demoCommand",
    short: "d", // optional, uses the first letter of "name" if not given here. 
    description: "does the same thing as 'watch'", 
    callback: function(options) {
        options.runOnFileChange = true;
    }
}

You can use these custom commands to set custom option sets you frequently use.

License

ISC