Configuration Options

Configuration Options

Elixir comes with a preset of configuration options that you can find under our dist/Config.js file. Below is the contents of the default Elixir configuration file:

    /*
     |----------------------------------------------------------------
     | Master Configuration
     |----------------------------------------------------------------
     |
     | This file contains the proper paths and options for each and
     | and every Gulp task that Elixir wraps up. To override any
     | setting, reference elixir.config.* from your Gulpfile.
     |
     | Alternatively you may create an elixir.json file within your
     | project root. As JSON, modify any settings contained here
     | and they'll take precedence over these defaults. Easy!
     |
     */

    const config = {

        /*
         |----------------------------------------------------------------
         | Production Mode
         |----------------------------------------------------------------
         |
         | Elixir will trigger certain actions, dependent upon this flag.
         | You may enable this mode by triggering "gulp --production",
         | enabling things like CSS and JS minification. EasyPeasy!
         |
         */

        production: Elixir.inProduction,

        /*
         |----------------------------------------------------------------
         | Assets Path
         |----------------------------------------------------------------
         |
         | This assets path property is prefixed to all relevant assets
         | in your application. For example, "resources/assets/sass"
         | or "resources/assets/coffee." Change this if you must.
         |
         */

        assetsPath: 'resources/assets',

        /*
         |----------------------------------------------------------------
         | Public Path
         |----------------------------------------------------------------
         |
         | Much like assets path, this public path property is prefixed to
         | any paths in your application, that point to the public dir.
         | It's useful, when a server requires a unique public path.
         |
         */

        publicPath: 'includes',

        /*
         |----------------------------------------------------------------
         | App Path
         |----------------------------------------------------------------
         |
         | The app path, you guessed it, specifies the path to the app
         | folder in your project. If using ColdBox, then you won't
         | need to modify this path. Otherwise modify as needed.
         |
         */

        appPaths : {
            "root"          : "",
            "config"        : "config",
            "handlers"      : "handlers",
            "interceptors"  : "interceptors",
            "layouts"       : "layouts",
            "models"        : "models",
            "modules"       : "modules",
            "modules_app"   : "modules_app",
            "tests"         : "tests"
        },

        /*
         |----------------------------------------------------------------
         | View Path
         |----------------------------------------------------------------
         |
         | Very likely, you will never need/want to modify this property.
         | However, for the instances where your app's views directory
         | is located in a different spot, please modify as needed.
         |
         */

        viewPaths: {
            "views"   : "views",
            "layouts" : "layouts"
        },

        /*
         |----------------------------------------------------------------
         | Notifications
         |----------------------------------------------------------------
         |
         | As a convenience, Elixir will, when available, automatically
         | display OS notifications upon the completion of any task.
         | But of course you're free to disable this, if needed.
         |
         */

        notifications: true,

        /*
         |----------------------------------------------------------------
         | Log Muted
         |----------------------------------------------------------------
         |
         | As a convenience, Elixir will, when available, automatically
         | display OS log upon the completion of any task.
         | But of course you're free to disable this, if needed.
         |
         */
        muted: process.argv[1].indexOf('bin/_mocha') > -1,

        /*
         |----------------------------------------------------------------
         | Sourcemaps
         |----------------------------------------------------------------
         |
         | A sourcemap is a JSON mapping, which declares a relationship
         | between a minified file and its original source location.
         | Quite useful for debugging, it's turned on by default.
         |
         */

        sourcemaps: ! Elixir.inProduction,

        /*
         |----------------------------------------------------------------
         | File System Event Batching
         |----------------------------------------------------------------
         |
         | You likely won't need to modify this object. That said, should
         | you need to, these settings are exclusive to the watch task.
         | They set the limit and timeout for running batch-updates.
         |
         */

        batchOptions: {
            // https://github.com/floatdrop/gulp-batch#batchoptions-callback-errorhandler
            limit: undefined,
            timeout: 1000
        },

        css: {

            /*
             |----------------------------------------------------------------
             | CSS Source Folder
             |----------------------------------------------------------------
             |
             | This property declares the root folder for all vanilla CSS
             | files. Note that this is the folder name, not the path.
             | We'll stick with a general "css" name - makes sense.
             |
             */

            folder: 'css',

            /*
             |----------------------------------------------------------------
             | CSS Output Folder
             |----------------------------------------------------------------
             |
             | Generally, your source files will be stored outside of your
             | public directory, and then compiled/merged as necessary.
             | This property represents the public specific folder.
             |
             */

            outputFolder: 'css',

            /*
             |----------------------------------------------------------------
             | CSS3 Autoprefixing
             |----------------------------------------------------------------
             |
             | When working with any form of CSS, Elixir automatically runs
             | your file through a CSS autoprefixer, which automatically
             | adds or removes vendor-specific CSS3 prefixes. Useful!
             |
             */

            autoprefix: {
                enabled: true,

                // https://www.npmjs.com/package/gulp-autoprefixer#api
                options:  {
                    browsers: ['> 1%'],
                    cascade: false
                }
            },

            /*
             |----------------------------------------------------------------
             | CSS3 Minification
             |----------------------------------------------------------------
             |
             | When running Gulp with the production flag, any CSS will
             | automatically be minified. This offers the benefit of
             | reduced file sizes. Adjust any plugin option here.
             |
             */

            minifier: {
                // https://github.com/jakubpawlowicz/clean-css#how-to-use-clean-css-api
                pluginOptions: {}
            },

            /*
             |----------------------------------------------------------------
             | Sass Compilation
             |----------------------------------------------------------------
             |
             | Gone are the days of researching how to call Sass on a given
             | folder. Simply run `mix.sass('file.scss')` and you're all
             | set. This object sets the folder name and plugin opts.
             |
             */

            sass: {
                folder: 'sass',

                search: '/**/*.+(sass|scss)',

                // https://github.com/sass/node-sass#options
                pluginOptions: {
                    outputStyle: Elixir.inProduction ? 'compressed' : 'nested',
                    precision: 10
                }
            },

            /*
             |----------------------------------------------------------------
             | Less Compilation
             |----------------------------------------------------------------
             |
             | Gone are the days of researching how to call Less on a given
             | folder. Simply run `mix.less('file.less')` and you're all
             | set. This object sets the folder name and plugin opts.
             |
             */

            less: {
                folder: 'less',

                search: '/**/*.less',

                // https://github.com/plus3network/gulp-less#options
                pluginOptions: {}
            }
        },

        js: {

            /*
             |----------------------------------------------------------------
             | JavaScript Source Folder
             |----------------------------------------------------------------
             |
             | Much like the CSS folder option above, this property sets the
             | name of the folder, not the full path, for your JavaScript
             | source files. It then gets affixed to the "assetsPath".
             |
             */

            folder: 'js',

            /*
             |----------------------------------------------------------------
             | JavaScript Output Folder
             |----------------------------------------------------------------
             |
             | Once your vanilla JavaScript files have been compiled/merged,
             | they will be saved to your public directory. This property
             | represents the name of the folder within that location.
             |
             */

            outputFolder: 'js',

            /*
             |----------------------------------------------------------------
             | UglifyJS Parser/Compressor/Beautifier
             |----------------------------------------------------------------
             |
             | UglifyJS is a JavaScript parser/compressor/beautifier.
             | It'll minify your JavaScript with ease and has an option to
             | mangle your code.
             |
             */

            uglify: {
                options: {
                    compress: {
                        drop_console: Elixir.inProduction
                    }
                }
            }
        },

        testing: {

            /*
             |----------------------------------------------------------------
             | TestBox Autotesting
             |----------------------------------------------------------------
             |
             | Want to automatically trigger your TestBox tests? Not a problem.
             | This object stores your default TestBox directory path. For a
             | custom command, you may use the second arg to mix.testbox.
             |
             */

            testbox: {
                path: 'tests/specs',
                search: '/**/*.cfc',
                command: 'box testbox run'
            },

        },

        /*
         |----------------------------------------------------------------
         | File Versioning
         |----------------------------------------------------------------
         |
         | If you use aggressive assets caching on your server, then you
         | will need a way to cachebust, right? No querystring needed
         | this time. Here you may set the default "build" folder.
         |
         */

        versioning: {
            buildFolder: 'build'
        },

        /*
         |----------------------------------------------------------------
         | Browsersync
         |----------------------------------------------------------------
         |
         | Want to have your browser refresh instantly upon changing a bit
         | of Sass or modifying a view? With Elixir, it has never been
         | easier. This contains default options for the extension.
         |
         */

        browserSync: {
            // http://www.browsersync.io/docs/options/
            reloadOnRestart : true,
            notify: true,
            // without this, the path seems to be relative to the proxied app (which won't work)
            scriptPath: function( path, port, options ) {
                return options.get( "absolute" );
            }
        },

        /*
         |----------------------------------------------------------------
         | Watch
         |----------------------------------------------------------------
         |
         | Configure how your filesystem is monitored for changes. This
         | modifies the behavior of any task using "watch."
         |
         */

        watch: {
            // https://www.npmjs.com/package/gulp-watch/#options
            interval: 1000,
            usePolling: true
        }
    };

Overriding Configuration Options

You can override or add configuration options in your Gulpfile.js by referencing the elixir.config.* keys.

elixir.config.production = true;

Last updated