Compiling Assets (Laravel Elixir) | Laravel 5.3 - The clean stack for Artisans and agents

1<\/span>elixir<\/span>(<\/span>function<\/span>(<\/span>mix<\/span>)<\/span> {<\/span><\/div>2<\/span>    mix<\/span>.<\/span>sass<\/span>(<\/span>'<\/span>app.scss<\/span>'<\/span>)<\/span><\/div>3<\/span>       <\/span>.<\/span>webpack<\/span>(<\/span>'<\/span>app.js<\/span>'<\/span>);<\/span><\/div>4<\/span>});<\/span><\/div>\nelixir(function(mix) {\n    mix.sass('app.scss')\n       .webpack('app.js');\n});<\/div><\/code><\/pre>\n<\/div>\nIf you've ever been confused and overwhelmed about getting started with Gulp and asset compilation, you will love Laravel Elixir. However, you are not required to use it while developing your application. You are free to use any asset pipeline tool you wish, or even none at all.<\/p>\nInstallation & Setup<\/a><\/h2>\nInstalling Node<\/h4>\nBefore triggering Elixir, you must first ensure that Node.js and NPM are installed on your machine.<\/p>\n1<\/span>node<\/span> <\/span>-<\/span>v<\/span><\/div>2<\/span>npm<\/span> <\/span>-<\/span>v<\/span><\/div>\nnode -v\nnpm -v<\/div><\/code><\/pre>\nBy default, Laravel Homestead includes everything you need; however, if you aren't using Vagrant, then you can easily install the latest version of Node and NPM using simple graphical installers from their download page<\/a>.<\/p>\n
Gulp<\/h4>\nNext, you'll need to pull in Gulp<\/a> as a global NPM package:<\/p>\n
1<\/span>npm<\/span> <\/span>install<\/span> <\/span>--<\/span>global<\/span> <\/span>gulp<\/span>-<\/span>cli<\/span><\/div>\nnpm install --global gulp-cli<\/div><\/code><\/pre>\nLaravel Elixir<\/h4>\nThe only remaining step is to install Laravel Elixir. Within a fresh installation of Laravel, you'll find a package.json<\/code> file in the root of your directory structure. The default package.json<\/code> file includes Elixir and the Webpack JavaScript module bundler. Think of this like your composer.json<\/code> file, except it defines Node dependencies instead of PHP. You may install the dependencies it references by running:<\/p>\n1<\/span>npm<\/span> <\/span>install<\/span><\/div>\nnpm install<\/div><\/code><\/pre>\nIf you are developing on a Windows system or you are running your VM on a Windows host system, you may need to run the npm install<\/code> command with the --no-bin-links<\/code> switch enabled:<\/p>\n1<\/span>npm<\/span> <\/span>install<\/span> <\/span>--<\/span>no<\/span>-<\/span>bin<\/span>-<\/span>links<\/span><\/div>\nnpm install --no-bin-links<\/div><\/code><\/pre>\nRunning Elixir<\/a><\/h2>\nElixir is built on top of Gulp<\/a>, so to run your Elixir tasks you only need to run the gulp<\/code> command in your terminal. Adding the --production<\/code> flag to the command will instruct Elixir to minify your CSS and JavaScript files:<\/p>\n1<\/span>\/\/<\/span> Run all tasks...<\/span><\/div>2<\/span>gulp<\/span><\/div>3<\/span> <\/div>4<\/span>\/\/<\/span> Run all tasks and minify all CSS and JavaScript...<\/span><\/div>5<\/span>gulp<\/span> <\/span>--<\/span>production<\/span><\/div>\n\/\/ Run all tasks...\ngulp\n\n\/\/ Run all tasks and minify all CSS and JavaScript...\ngulp --production<\/div><\/code><\/pre>\nUpon running this command, you'll see a nicely formatted table that displays a summary of the events that just took place.<\/p>\nWatching Assets For Changes<\/h4>\nThe gulp watch<\/code> command will continue running in your terminal and watch your assets for any changes. Gulp will automatically recompile your assets if you modify them while the watch<\/code> command is running:<\/p>\n1<\/span>gulp<\/span> <\/span>watch<\/span><\/div>\ngulp watch<\/div><\/code><\/pre>\nWorking With Stylesheets<\/a><\/h2>\nThe gulpfile.js<\/code> file in your project's root directory contains all of your Elixir tasks. Elixir tasks can be chained together to define exactly how your assets should be compiled.<\/p>\nLess<\/a><\/h3>\nThe less<\/code> method may be used to compile Less<\/a> into CSS. The less<\/code> method assumes that your Less files are stored in resources\/assets\/less<\/code>. By default, the task will place the compiled CSS for this example in public\/css\/app.css<\/code>:<\/p>\n\n1<\/span>elixir<\/span>(<\/span>function<\/span>(<\/span>mix<\/span>)<\/span> {<\/span><\/div>2<\/span>    mix<\/span>.<\/span>less<\/span>(<\/span>'<\/span>app.less<\/span>'<\/span>);<\/span><\/div>3<\/span>});<\/span><\/div>\nelixir(function(mix) {\n    mix.less('app.less');\n});<\/div><\/code><\/pre>\n<\/div>\nYou may also combine multiple Less files into a single CSS file. Again, the resulting CSS will be placed in public\/css\/app.css<\/code>:<\/p>\n\n1<\/span>elixir<\/span>(<\/span>function<\/span>(<\/span>mix<\/span>)<\/span> {<\/span><\/div>2<\/span>    mix<\/span>.<\/span>less<\/span>([<\/span><\/div>3<\/span>        <\/span>'<\/span>app.less<\/span>'<\/span>,<\/span><\/div>4<\/span>        <\/span>'<\/span>controllers.less<\/span>'<\/span><\/div>5<\/span>    ]);<\/span><\/div>6<\/span>});<\/span><\/div>\nelixir(function(mix) {\n    mix.less([\n        'app.less',\n        'controllers.less'\n    ]);\n});<\/div><\/code><\/pre>\n<\/div>\nIf you wish to customize the output location of the compiled CSS, you may pass a second argument to the less<\/code> method:<\/p>\n\n1<\/span>elixir<\/span>(<\/span>function<\/span>(<\/span>mix<\/span>)<\/span> {<\/span><\/div>2<\/span>    mix<\/span>.<\/span>less<\/span>(<\/span>'<\/span>app.less<\/span>'<\/span>,<\/span> <\/span>'<\/span>public\/stylesheets<\/span>'<\/span>);<\/span><\/div>3<\/span>});<\/span><\/div>4<\/span> <\/div>5<\/span>\/\/<\/span> Specifying a specific output filename...<\/span><\/div>6<\/span>elixir<\/span>(<\/span>function<\/span>(<\/span>mix<\/span>)<\/span> {<\/span><\/div>7<\/span>    mix<\/span>.<\/span>less<\/span>(<\/span>'<\/span>app.less<\/span>'<\/span>,<\/span> <\/span>'<\/span>public\/stylesheets\/style.css<\/span>'<\/span>);<\/span><\/div>8<\/span>});<\/span><\/div>\nelixir(function(mix) {\n    mix.less('app.less', 'public\/stylesheets');\n});\n\n\/\/ Specifying a specific output filename...\nelixir(function(mix) {\n    mix.less('app.less', 'public\/stylesheets\/style.css');\n});<\/div><\/code><\/pre>\n<\/div>\nSass<\/a><\/h3>\nThe sass<\/code> method allows you to compile Sass<\/a> into CSS. Assuming your Sass files are stored at resources\/assets\/sass<\/code>, you may use the method like so:<\/p>\n\n1<\/span>elixir<\/span>(<\/span>function<\/span>(<\/span>mix<\/span>)<\/span> {<\/span><\/div>2<\/span>    mix<\/span>.<\/span>sass<\/span>(<\/span>'<\/span>app.scss<\/span>'<\/span>);<\/span><\/div>3<\/span>});<\/span><\/div>\nelixir(function(mix) {\n    mix.sass('app.scss');\n});<\/div><\/code><\/pre>\n<\/div>\nAgain, like the less<\/code> method, you may compile multiple Sass files into a single CSS file, and even customize the output directory of the resulting CSS:<\/p>\n\n1<\/span>elixir<\/span>(<\/span>function<\/span>(<\/span>mix<\/span>)<\/span> {<\/span><\/div>2<\/span>    mix<\/span>.<\/span>sass<\/span>([<\/span><\/div>3<\/span>        <\/span>'<\/span>app.scss<\/span>'<\/span>,<\/span><\/div>4<\/span>        <\/span>'<\/span>controllers.scss<\/span>'<\/span><\/div>5<\/span>    ]<\/span>,<\/span> <\/span>'<\/span>public\/assets\/css<\/span>'<\/span>);<\/span><\/div>6<\/span>});<\/span><\/div>\nelixir(function(mix) {\n    mix.sass([\n        'app.scss',\n        'controllers.scss'\n    ], 'public\/assets\/css');\n});<\/div><\/code><\/pre>\n<\/div>\nCustom Paths<\/h4>\nWhile it's recommended that you use Laravel's default asset directories, if you require a different base directory, you may begin any file path with .\/<\/code>. This instructs Elixir to begin at the project root, rather than using the default base directory.<\/p>\n
For example, to compile a file located at app\/assets\/sass\/app.scss<\/code> and output the results to public\/css\/app.css<\/code>, you would make the following call to the sass<\/code> method:<\/p>\n\n1<\/span>elixir<\/span>(<\/span>function<\/span>(<\/span>mix<\/span>)<\/span> {<\/span><\/div>2<\/span>    mix<\/span>.<\/span>sass<\/span>(<\/span>'<\/span>.\/app\/assets\/sass\/app.scss<\/span>'<\/span>);<\/span><\/div>3<\/span>});<\/span><\/div>\nelixir(function(mix) {\n    mix.sass('.\/app\/assets\/sass\/app.scss');\n});<\/div><\/code><\/pre>\n<\/div>\nStylus<\/a><\/h3>\nThe stylus<\/code> method may be used to compile Stylus<\/a> into CSS. Assuming that your Stylus files are stored in resources\/assets\/stylus<\/code>, you may call the method like so:<\/p>\n\n1<\/span>elixir<\/span>(<\/span>function<\/span>(<\/span>mix<\/span>)<\/span> {<\/span><\/div>2<\/span>    mix<\/span>.<\/span>stylus<\/span>(<\/span>'<\/span>app.styl<\/span>'<\/span>);<\/span><\/div>3<\/span>});<\/span><\/div>\nelixir(function(mix) {\n    mix.stylus('app.styl');\n});<\/div><\/code><\/pre>\n<\/div>\n\n    \n         This method's signature is identical to both mix.less()<\/code> and mix.sass()<\/code>.<\/p>\n<\/div>\nPlain CSS<\/a><\/h3>\nIf you would just like to combine some plain CSS stylesheets into a single file, you may use the styles<\/code> method. Paths passed to this method are relative to the resources\/assets\/css<\/code> directory and the resulting CSS will be placed in public\/css\/all.css<\/code>:<\/p>\n\n1<\/span>elixir<\/span>(<\/span>function<\/span>(<\/span>mix<\/span>)<\/span> {<\/span><\/div>2<\/span>    mix<\/span>.<\/span>styles<\/span>([<\/span><\/div>3<\/span>        <\/span>'<\/span>normalize.css<\/span>'<\/span>,<\/span><\/div>4<\/span>        <\/span>'<\/span>main.css<\/span>'<\/span><\/div>5<\/span>    ]);<\/span><\/div>6<\/span>});<\/span><\/div>\nelixir(function(mix) {\n    mix.styles([\n        'normalize.css',\n        'main.css'\n    ]);\n});<\/div><\/code><\/pre>\n<\/div>\nYou may also instruct Elixir to write the resulting file to a custom directory or file by passing a second argument to the styles<\/code> method:<\/p>\n\n1<\/span>elixir<\/span>(<\/span>function<\/span>(<\/span>mix<\/span>)<\/span> {<\/span><\/div>2<\/span>    mix<\/span>.<\/span>styles<\/span>([<\/span><\/div>3<\/span>        <\/span>'<\/span>normalize.css<\/span>'<\/span>,<\/span><\/div>4<\/span>        <\/span>'<\/span>main.css<\/span>'<\/span><\/div>5<\/span>    ]<\/span>,<\/span> <\/span>'<\/span>public\/assets\/css\/site.css<\/span>'<\/span>);<\/span><\/div>6<\/span>});<\/span><\/div>\nelixir(function(mix) {\n    mix.styles([\n        'normalize.css',\n        'main.css'\n    ], 'public\/assets\/css\/site.css');\n});<\/div><\/code><\/pre>\n<\/div>\nSource Maps<\/a><\/h3>\nIn Elixir, source maps are enabled by default and provide better debugging information to your browser's developer tools when using compiled assets. For each relevant file that is compiled, you will find a companion *.css.map<\/code> or *.js.map<\/code> file in the same directory.<\/p>\n
If you do not want source maps generated for your application, you may disable them using the sourcemaps<\/code> configuration option:<\/p>\n\n1<\/span>elixir<\/span>.<\/span>config<\/span>.<\/span>sourcemaps<\/span> <\/span>=<\/span> <\/span>false<\/span>;<\/span><\/div>2<\/span> <\/div>3<\/span>elixir<\/span>(<\/span>function<\/span>(<\/span>mix<\/span>)<\/span> {<\/span><\/div>4<\/span>    mix<\/span>.<\/span>sass<\/span>(<\/span>'<\/span>app.scss<\/span>'<\/span>);<\/span><\/div>5<\/span>});<\/span><\/div>\nelixir.config.sourcemaps = false;\n\nelixir(function(mix) {\n    mix.sass('app.scss');\n});<\/div><\/code><\/pre>\n<\/div>\nWorking With Scripts<\/a><\/h2>\nElixir provides several features to help you work with your JavaScript files, such as compiling ECMAScript 2015, module bundling, minification, and simply concatenating plain JavaScript files.<\/p>\nWhen writing ES2015 with modules, you have your choice between Webpack<\/a> and Rollup<\/a>. If these tools are foreign to you, don't worry, Elixir will handle all of the hard work behind the scenes. By default, the Laravel gulpfile<\/code> uses webpack<\/code> to compile Javascript, but you are free to use any module bundler you like.<\/p>\nWebpack<\/a><\/h3>\nThe webpack<\/code> method may be used to compile and bundle ECMAScript 2015<\/a> into plain JavaScript. This function accepts a file path relative to the resources\/assets\/js<\/code> directory and generates a single bundled file in the public\/js<\/code> directory:<\/p>\n\n1<\/span>elixir<\/span>(<\/span>function<\/span>(<\/span>mix<\/span>)<\/span> {<\/span><\/div>2<\/span>    mix<\/span>.<\/span>webpack<\/span>(<\/span>'<\/span>app.js<\/span>'<\/span>);<\/span><\/div>3<\/span>});<\/span><\/div>\nelixir(function(mix) {\n    mix.webpack('app.js');\n});<\/div><\/code><\/pre>\n<\/div>\nTo choose a different output or base directory, simply specify your desired paths with a leading .<\/code>. Then you may specify the paths relative to the root of your application. For example, to compile app\/assets\/js\/app.js<\/code> to public\/dist\/app.js<\/code>:<\/p>\n\n1<\/span>elixir<\/span>(<\/span>function<\/span>(<\/span>mix<\/span>)<\/span> {<\/span><\/div>2<\/span>    mix<\/span>.<\/span>webpack<\/span>(<\/span><\/div>3<\/span>        <\/span>'<\/span>.\/app\/assets\/js\/app.js<\/span>'<\/span>,<\/span><\/div>4<\/span>        <\/span>'<\/span>.\/public\/dist<\/span>'<\/span><\/div>5<\/span>    );<\/span><\/div>6<\/span>});<\/span><\/div>\nelixir(function(mix) {\n    mix.webpack(\n        '.\/app\/assets\/js\/app.js',\n        '.\/public\/dist'\n    );\n});<\/div><\/code><\/pre>\n<\/div>\nIf you'd like to leverage more of Webpack's functionality, Elixir will read any webpack.config.js<\/code> file that is in your project root and factor its configuration<\/a> into the build process.<\/p>\nRollup<\/a><\/h3>\nSimilar to Webpack, Rollup is a next-generation bundler for ES2015. This function accepts an array of files relative to the resources\/assets\/js<\/code> directory, and generates a single file in the public\/js<\/code> directory:<\/p>\n\n1<\/span>elixir<\/span>(<\/span>function<\/span>(<\/span>mix<\/span>)<\/span> {<\/span><\/div>2<\/span>    mix<\/span>.<\/span>rollup<\/span>(<\/span>'<\/span>app.js<\/span>'<\/span>);<\/span><\/div>3<\/span>});<\/span><\/div>\nelixir(function(mix) {\n    mix.rollup('app.js');\n});<\/div><\/code><\/pre>\n<\/div>\nLike the webpack<\/code> method, you may customize the location of the input and output files given to the rollup<\/code> method:<\/p>\n1<\/span>elixir<\/span>(<\/span>function<\/span>(<\/span>mix<\/span>)<\/span> <\/span>{<\/span><\/div>2<\/span>    mix<\/span>.<\/span>rollup<\/span>(<\/span><\/div>3<\/span>        <\/span>'<\/span>.\/resources\/assets\/js\/app.js<\/span>'<\/span>,<\/span><\/div>4<\/span>        <\/span>'<\/span>.\/public\/dist<\/span>'<\/span><\/div>5<\/span>    <\/span>);<\/span><\/div>6<\/span>});<\/span><\/div>\nelixir(function(mix) {\n    mix.rollup(\n        '.\/resources\/assets\/js\/app.js',\n        '.\/public\/dist'\n    );\n});<\/div><\/code><\/pre>\nScripts<\/a><\/h3>\nIf you have multiple JavaScript files that you would like to combine into a single file, you may use the scripts<\/code> method, which provides automatic source maps, concatenation, and minification.<\/p>\n
The scripts<\/code> method assumes all paths are relative to the resources\/assets\/js<\/code> directory, and will place the resulting JavaScript in public\/js\/all.js<\/code> by default:<\/p>\n\n1<\/span>elixir<\/span>(<\/span>function<\/span>(<\/span>mix<\/span>)<\/span> {<\/span><\/div>2<\/span>    mix<\/span>.<\/span>scripts<\/span>([<\/span><\/div>3<\/span>        <\/span>'<\/span>order.js<\/span>'<\/span>,<\/span><\/div>4<\/span>        <\/span>'<\/span>forum.js<\/span>'<\/span><\/div>5<\/span>    ]);<\/span><\/div>6<\/span>});<\/span><\/div>\nelixir(function(mix) {\n    mix.scripts([\n        'order.js',\n        'forum.js'\n    ]);\n});<\/div><\/code><\/pre>\n<\/div>\nIf you need to concatenate multiple sets of scripts into different files, you may make multiple calls to the scripts<\/code> method. The second argument given to the method determines the resulting file name for each concatenation:<\/p>\n\n1<\/span>elixir<\/span>(<\/span>function<\/span>(<\/span>mix<\/span>)<\/span> {<\/span><\/div>2<\/span>    mix<\/span>.<\/span>scripts<\/span>([<\/span>'<\/span>app.js<\/span>'<\/span>,<\/span> <\/span>'<\/span>controllers.js<\/span>'<\/span>]<\/span>,<\/span> <\/span>'<\/span>public\/js\/app.js<\/span>'<\/span>)<\/span><\/div>3<\/span>       <\/span>.<\/span>scripts<\/span>([<\/span>'<\/span>forum.js<\/span>'<\/span>,<\/span> <\/span>'<\/span>threads.js<\/span>'<\/span>]<\/span>,<\/span> <\/span>'<\/span>public\/js\/forum.js<\/span>'<\/span>);<\/span><\/div>4<\/span>});<\/span><\/div>\nelixir(function(mix) {\n    mix.scripts(['app.js', 'controllers.js'], 'public\/js\/app.js')\n       .scripts(['forum.js', 'threads.js'], 'public\/js\/forum.js');\n});<\/div><\/code><\/pre>\n<\/div>\nIf you need to combine all of the scripts in a given directory, you may use the scriptsIn<\/code> method. The resulting JavaScript will be placed in public\/js\/all.js<\/code>:<\/p>\n\n1<\/span>elixir<\/span>(<\/span>function<\/span>(<\/span>mix<\/span>)<\/span> {<\/span><\/div>2<\/span>    mix<\/span>.<\/span>scriptsIn<\/span>(<\/span>'<\/span>public\/js\/some\/directory<\/span>'<\/span>);<\/span><\/div>3<\/span>});<\/span><\/div>\nelixir(function(mix) {\n    mix.scriptsIn('public\/js\/some\/directory');\n});<\/div><\/code><\/pre>\n<\/div>\n\n    \n         If you intend to concatenate multiple pre-minified vendor libraries, such as jQuery, instead consider using mix.combine()<\/code>. This will combine the files, while omitting the source map and minification steps. As a result, compile times will drastically improve.<\/p>\n<\/div>\nCopying Files & Directories<\/a><\/h2>\nThe copy<\/code> method may be used to copy files and directories to new locations. All operations are relative to the project's root directory:<\/p>\n\n1<\/span>elixir<\/span>(<\/span>function<\/span>(<\/span>mix<\/span>)<\/span> {<\/span><\/div>2<\/span>    mix<\/span>.<\/span>copy<\/span>(<\/span>'<\/span>vendor\/foo\/bar.css<\/span>'<\/span>,<\/span> <\/span>'<\/span>public\/css\/bar.css<\/span>'<\/span>);<\/span><\/div>3<\/span>});<\/span><\/div>\nelixir(function(mix) {\n    mix.copy('vendor\/foo\/bar.css', 'public\/css\/bar.css');\n});<\/div><\/code><\/pre>\n<\/div>\nVersioning \/ Cache Busting<\/a><\/h2>\nMany developers suffix their compiled assets with a timestamp or unique token to force browsers to load the fresh assets instead of serving stale copies of the code. Elixir can handle this for you using the version<\/code> method.<\/p>\n
The version<\/code> method accepts a file name relative to the public<\/code> directory, and will append a unique hash to the filename, allowing for cache-busting. For example, the generated file name will look something like: all-16d570a7.css<\/code>:<\/p>\n\n1<\/span>elixir<\/span>(<\/span>function<\/span>(<\/span>mix<\/span>)<\/span> {<\/span><\/div>2<\/span>    mix<\/span>.<\/span>version<\/span>(<\/span>'<\/span>css\/all.css<\/span>'<\/span>);<\/span><\/div>3<\/span>});<\/span><\/div>\nelixir(function(mix) {\n    mix.version('css\/all.css');\n});<\/div><\/code><\/pre>\n<\/div>\nAfter generating the versioned file, you may use Laravel's global elixir<\/code> helper within your views<\/a> to load the appropriately hashed asset. The elixir<\/code> function will automatically determine the current name of the hashed file:<\/p>\n1<\/span><<\/span>link<\/span> <\/span>rel<\/span>=<\/span>"<\/span>stylesheet<\/span>"<\/span> <\/span>href<\/span>=<\/span>"<\/span>{{ elixir('css\/all.css') }}<\/span>"<\/span>><\/span><\/div>\n<link rel="stylesheet" href="{{ elixir('css\/all.css') }}"><\/div><\/code><\/pre>\nVersioning Multiple Files<\/h4>\nYou may pass an array to the version<\/code> method to version multiple files:<\/p>\n\n1<\/span>elixir<\/span>(<\/span>function<\/span>(<\/span>mix<\/span>)<\/span> {<\/span><\/div>2<\/span>    mix<\/span>.<\/span>version<\/span>([<\/span>'<\/span>css\/all.css<\/span>'<\/span>,<\/span> <\/span>'<\/span>js\/app.js<\/span>'<\/span>]);<\/span><\/div>3<\/span>});<\/span><\/div>\nelixir(function(mix) {\n    mix.version(['css\/all.css', 'js\/app.js']);\n});<\/div><\/code><\/pre>\n<\/div>\nOnce the files have been versioned, you may use the elixir<\/code> helper function to generate links to the proper hashed files. Remember, you only need to pass the name of the un-hashed file to the elixir<\/code> helper function. The helper will use the un-hashed name to determine the current hashed version of the file:<\/p>\n1<\/span><<\/span>link<\/span> <\/span>rel<\/span>=<\/span>"<\/span>stylesheet<\/span>"<\/span> <\/span>href<\/span>=<\/span>"<\/span>{{ elixir('css\/all.css') }}<\/span>"<\/span>><\/span><\/div>2<\/span> <\/div>3<\/span><<\/span>script<\/span> <\/span>src<\/span>=<\/span>"<\/span>{{ elixir('js\/app.js') }}<\/span>"<\/span>><<\/span>\/<\/span>script<\/span>><\/span><\/div>\n<link rel="stylesheet" href="{{ elixir('css\/all.css') }}">\n\n<script src="{{ elixir('js\/app.js') }}"><\/script><\/div><\/code><\/pre>\nBrowserSync<\/a><\/h2>\nBrowserSync automatically refreshes your web browser after you make changes to your assets. The browserSync<\/code> method accepts a JavaScript object with a proxy<\/code> attribute containing the local URL for your application. Then, once you run gulp watch<\/code> you may access your web application using port 3000 (http:\/\/project.dev:3000<\/code>) to enjoy browser syncing:<\/p>\n\n1<\/span>elixir<\/span>(<\/span>function<\/span>(<\/span>mix<\/span>)<\/span> {<\/span><\/div>2<\/span>    mix<\/span>.<\/span>browserSync<\/span>({<\/span><\/div>3<\/span>        proxy: <\/span>'<\/span>project.dev<\/span>'<\/span><\/div>4<\/span>    });<\/span><\/div>5<\/span>});<\/span><\/div>\nelixir(function(mix) {\n    mix.browserSync({\n        proxy: 'project.dev'\n    });\n});<\/div><\/code><\/pre>\n<\/div>\n","index":[{"title":"Prologue","active":false,"items":[{"title":"Release Notes","href":"\/framework\/docs\/5.3\/releases","active":false},{"title":"Upgrade Guide","href":"\/framework\/docs\/5.3\/upgrade","active":false},{"title":"Contribution Guide","href":"\/framework\/docs\/5.3\/contributions","active":false}]},{"title":"Getting Started","active":false,"items":[{"title":"Installation","href":"\/framework\/docs\/5.3\/installation","active":false},{"title":"Configuration","href":"\/framework\/docs\/5.3\/configuration","active":false},{"title":"Directory Structure","href":"\/framework\/docs\/5.3\/structure","active":false},{"title":"Request Lifecycle","href":"\/framework\/docs\/5.3\/lifecycle","active":false}]},{"title":"Dev Environments","active":false,"items":[{"title":"Homestead","href":"\/framework\/docs\/5.3\/homestead","active":false},{"title":"Valet","href":"\/framework\/docs\/5.3\/valet","active":false}]},{"title":"Core Concepts","active":false,"items":[{"title":"Service Container","href":"\/framework\/docs\/5.3\/container","active":false},{"title":"Service Providers","href":"\/framework\/docs\/5.3\/providers","active":false},{"title":"Facades","href":"\/framework\/docs\/5.3\/facades","active":false},{"title":"Contracts","href":"\/framework\/docs\/5.3\/contracts","active":false}]},{"title":"The HTTP Layer","active":false,"items":[{"title":"Routing","href":"\/framework\/docs\/5.3\/routing","active":false},{"title":"Middleware","href":"\/framework\/docs\/5.3\/middleware","active":false},{"title":"CSRF Protection","href":"\/framework\/docs\/5.3\/csrf","active":false},{"title":"Controllers","href":"\/framework\/docs\/5.3\/controllers","active":false},{"title":"Requests","href":"\/framework\/docs\/5.3\/requests","active":false},{"title":"Responses","href":"\/framework\/docs\/5.3\/responses","active":false},{"title":"Session","href":"\/framework\/docs\/5.3\/session","active":false},{"title":"Validation","href":"\/framework\/docs\/5.3\/validation","active":false}]},{"title":"Views & Templates","active":false,"items":[{"title":"Views","href":"\/framework\/docs\/5.3\/views","active":false},{"title":"Blade Templates","href":"\/framework\/docs\/5.3\/blade","active":false},{"title":"Localization","href":"\/framework\/docs\/5.3\/localization","active":false}]},{"title":"JavaScript & CSS","active":true,"items":[{"title":"Getting Started","href":"\/framework\/docs\/5.3\/frontend","active":false},{"title":"Compiling Assets","href":"\/framework\/docs\/5.3\/elixir","active":true}]},{"title":"Security","active":false,"items":[{"title":"Authentication","href":"\/framework\/docs\/5.3\/authentication","active":false},{"title":"Authorization","href":"\/framework\/docs\/5.3\/authorization","active":false},{"title":"Password Reset","href":"\/framework\/docs\/5.3\/passwords","active":false},{"title":"API Authentication","href":"\/framework\/docs\/5.3\/passport","active":false},{"title":"Encryption","href":"\/framework\/docs\/5.3\/encryption","active":false},{"title":"Hashing","href":"\/framework\/docs\/5.3\/hashing","active":false}]},{"title":"General Topics","active":false,"items":[{"title":"Broadcasting","href":"\/framework\/docs\/5.3\/broadcasting","active":false},{"title":"Cache","href":"\/framework\/docs\/5.3\/cache","active":false},{"title":"Errors & Logging","href":"\/framework\/docs\/5.3\/errors","active":false},{"title":"Events","href":"\/framework\/docs\/5.3\/events","active":false},{"title":"File Storage","href":"\/framework\/docs\/5.3\/filesystem","active":false},{"title":"Mail","href":"\/framework\/docs\/5.3\/mail","active":false},{"title":"Notifications","href":"\/framework\/docs\/5.3\/notifications","active":false},{"title":"Queues","href":"\/framework\/docs\/5.3\/queues","active":false}]},{"title":"Database","active":false,"items":[{"title":"Getting Started","href":"\/framework\/docs\/5.3\/database","active":false},{"title":"Query Builder","href":"\/framework\/docs\/5.3\/queries","active":false},{"title":"Pagination","href":"\/framework\/docs\/5.3\/pagination","active":false},{"title":"Migrations","href":"\/framework\/docs\/5.3\/migrations","active":false},{"title":"Seeding","href":"\/framework\/docs\/5.3\/seeding","active":false},{"title":"Redis","href":"\/framework\/docs\/5.3\/redis","active":false}]},{"title":"Eloquent ORM","active":false,"items":[{"title":"Getting Started","href":"\/framework\/docs\/5.3\/eloquent","active":false},{"title":"Relationships","href":"\/framework\/docs\/5.3\/eloquent-relationships","active":false},{"title":"Collections","href":"\/framework\/docs\/5.3\/eloquent-collections","active":false},{"title":"Mutators","href":"\/framework\/docs\/5.3\/eloquent-mutators","active":false},{"title":"Serialization","href":"\/framework\/docs\/5.3\/eloquent-serialization","active":false}]},{"title":"Artisan Console","active":false,"items":[{"title":"Commands","href":"\/framework\/docs\/5.3\/artisan","active":false},{"title":"Task Scheduling","href":"\/framework\/docs\/5.3\/scheduling","active":false}]},{"title":"Testing","active":false,"items":[{"title":"Getting Started","href":"\/framework\/docs\/5.3\/testing","active":false},{"title":"Application Testing","href":"\/framework\/docs\/5.3\/application-testing","active":false},{"title":"Database","href":"\/framework\/docs\/5.3\/database-testing","active":false},{"title":"Mocking","href":"\/framework\/docs\/5.3\/mocking","active":false}]},{"title":"Official Packages","active":false,"items":[{"title":"Cashier","href":"\/framework\/docs\/5.3\/billing","active":false},{"title":"Envoy","href":"\/framework\/docs\/5.3\/envoy","active":false},{"title":"Passport","href":"\/framework\/docs\/5.3\/passport","active":false},{"title":"Scout","href":"\/framework\/docs\/5.3\/scout","active":false},{"title":"Socialite","href":"https:\/\/github.com\/laravel\/socialite","active":false}]},{"title":"Appendix","active":false,"items":[{"title":"Collections","href":"\/framework\/docs\/5.3\/collections","active":false},{"title":"Helpers","href":"\/framework\/docs\/5.3\/helpers","active":false},{"title":"Packages","href":"\/framework\/docs\/5.3\/packages","active":false}]}],"tableOfContents":[{"text":"Introduction","href":"#introduction","children":[]},{"text":"Installation & Setup","href":"#installation","children":[]},{"text":"Running Elixir","href":"#running-elixir","children":[]},{"text":"Working With Stylesheets","href":"#working-with-stylesheets","children":[{"text":"Less","href":"#less"},{"text":"Sass","href":"#sass"},{"text":"Stylus","href":"#stylus"},{"text":"Plain CSS","href":"#plain-css"},{"text":"Source Maps","href":"#css-source-maps"}]},{"text":"Working With Scripts","href":"#working-with-scripts","children":[{"text":"Webpack","href":"#webpack"},{"text":"Rollup","href":"#rollup"},{"text":"Scripts","href":"#javascript"}]},{"text":"Copying Files & Directories","href":"#copying-files-and-directories","children":[]},{"text":"Versioning \/ Cache Busting","href":"#versioning-and-cache-busting","children":[]},{"text":"BrowserSync","href":"#browser-sync","children":[]}],"currentVersion":"5.3","versions":{"master":"Master","13.x":"13.x","12.x":"12.x","11.x":"11.x","10.x":"10.x","9.x":"9.x","8.x":"8.x","7.x":"7.x","6.x":"6.x","5.8":"5.8","5.7":"5.7","5.6":"5.6","5.5":"5.5","5.4":"5.4","5.3":"5.3","5.2":"5.2","5.1":"5.1","5.0":"5.0","4.2":"4.2"},"currentSection":"\/elixir","canonical":"framework\/docs\/5.3\/elixir","page":"elixir","isOldVersion":true,"isUpcomingVersion":false,"defaultVersion":"13.x","markdownUrl":"https:\/\/laravel.com\/framework\/docs\/5.3\/elixir.md"},"url":"\/framework\/docs\/5.3\/elixir","version":"ebea38af361d66f67a87c91db827ab5d","sharedProps":["errors","appUrl","events","featuredEvents","navPartners","featuredArticle","alerts","githubStars","footerNavigation","themeMode","turnstileSiteKey","hubspot","mapboxPublicKey"]}
Home
⌘K
Skip to contentPrologue
Release Notes
Upgrade Guide
Contribution GuideGetting StartedInstallation
Configuration
Directory Structure
Request Lifecycle
Dev Environments
Homestead
ValetCore ConceptsService Container
Service Providers
FacadesContracts
The HTTP Layer
Routing
Middleware
CSRF Protection
Controllers
Requests
Responses
Session
ValidationViews & TemplatesViews
Blade TemplatesLocalization
JavaScript & CSS
Getting Started
Compiling Assets
Security
Authentication
Authorization
Password Reset
API Authentication
Encryption
HashingGeneral TopicsBroadcasting
Cache
Errors & Logging
EventsFile Storage
Mail
Notifications
Queues
Database
Getting Started
Query Builder
Pagination
Migrations
Seeding
RedisEloquent ORMGetting Started
Relationships
Collections
MutatorsSerialization
Artisan Console
Commands
Task Scheduling
Testing
Getting Started
Application Testing
Database
Mocking
Official Packages
Cashier
Envoy
Passport
Scout
Socialite
Appendix
Collections
Helpers
Packages
API DocumentationChangelog
WARNING You're browsing the documentation for an old version of Laravel. Consider upgrading your project to Laravel 13.x.Compiling Assets (Laravel Elixir)

Introduction
Installation & Setup
Running Elixir
Working With Stylesheets

Less
Sass
Stylus
Plain CSS
Source Maps


Working With Scripts

Webpack
Rollup
Scripts


Copying Files & Directories
Versioning / Cache Busting
BrowserSync

Introduction
Laravel Elixir provides a clean, fluent API for defining basic Gulp tasks for your Laravel application. Elixir supports common CSS and JavaScript pre-processors like Sass and Webpack. Using method chaining, Elixir allows you to fluently define your asset pipeline. For example:

1elixir(function(mix) {
2    mix.sass('app.scss')
3       .webpack('app.js');
4});

elixir(function(mix) {
    mix.sass('app.scss')
       .webpack('app.js');
});

If you've ever been confused and overwhelmed about getting started with Gulp and asset compilation, you will love Laravel Elixir. However, you are not required to use it while developing your application. You are free to use any asset pipeline tool you wish, or even none at all.
Installation & Setup
Installing Node
Before triggering Elixir, you must first ensure that Node.js and NPM are installed on your machine.
1node -v
2npm -v

node -v
npm -v
By default, Laravel Homestead includes everything you need; however, if you aren't using Vagrant, then you can easily install the latest version of Node and NPM using simple graphical installers from their download page.
Gulp
Next, you'll need to pull in Gulp as a global NPM package:
1npm install --global gulp-cli

npm install --global gulp-cli
Laravel Elixir
The only remaining step is to install Laravel Elixir. Within a fresh installation of Laravel, you'll find a package.json file in the root of your directory structure. The default package.json file includes Elixir and the Webpack JavaScript module bundler. Think of this like your composer.json file, except it defines Node dependencies instead of PHP. You may install the dependencies it references by running:
1npm install

npm install
If you are developing on a Windows system or you are running your VM on a Windows host system, you may need to run the npm install command with the --no-bin-links switch enabled:
1npm install --no-bin-links

npm install --no-bin-links
Running Elixir
Elixir is built on top of Gulp, so to run your Elixir tasks you only need to run the gulp command in your terminal. Adding the --production flag to the command will instruct Elixir to minify your CSS and JavaScript files:
1// Run all tasks...
2gulp
3 
4// Run all tasks and minify all CSS and JavaScript...
5gulp --production

// Run all tasks...
gulp

// Run all tasks and minify all CSS and JavaScript...
gulp --production
Upon running this command, you'll see a nicely formatted table that displays a summary of the events that just took place.
Watching Assets For Changes
The gulp watch command will continue running in your terminal and watch your assets for any changes. Gulp will automatically recompile your assets if you modify them while the watch command is running:
1gulp watch

gulp watch
Working With Stylesheets
The gulpfile.js file in your project's root directory contains all of your Elixir tasks. Elixir tasks can be chained together to define exactly how your assets should be compiled.
Less
The less method may be used to compile Less into CSS. The less method assumes that your Less files are stored in resources/assets/less. By default, the task will place the compiled CSS for this example in public/css/app.css:

1elixir(function(mix) {
2    mix.less('app.less');
3});

elixir(function(mix) {
    mix.less('app.less');
});

You may also combine multiple Less files into a single CSS file. Again, the resulting CSS will be placed in public/css/app.css:

1elixir(function(mix) {
2    mix.less([
3        'app.less',
4        'controllers.less'
5    ]);
6});

elixir(function(mix) {
    mix.less([
        'app.less',
        'controllers.less'
    ]);
});

If you wish to customize the output location of the compiled CSS, you may pass a second argument to the less method:

1elixir(function(mix) {
2    mix.less('app.less', 'public/stylesheets');
3});
4 
5// Specifying a specific output filename...
6elixir(function(mix) {
7    mix.less('app.less', 'public/stylesheets/style.css');
8});

elixir(function(mix) {
    mix.less('app.less', 'public/stylesheets');
});

// Specifying a specific output filename...
elixir(function(mix) {
    mix.less('app.less', 'public/stylesheets/style.css');
});

Sass
The sass method allows you to compile Sass into CSS. Assuming your Sass files are stored at resources/assets/sass, you may use the method like so:

1elixir(function(mix) {
2    mix.sass('app.scss');
3});

elixir(function(mix) {
    mix.sass('app.scss');
});

Again, like the less method, you may compile multiple Sass files into a single CSS file, and even customize the output directory of the resulting CSS:

1elixir(function(mix) {
2    mix.sass([
3        'app.scss',
4        'controllers.scss'
5    ], 'public/assets/css');
6});

elixir(function(mix) {
    mix.sass([
        'app.scss',
        'controllers.scss'
    ], 'public/assets/css');
});

Custom Paths
While it's recommended that you use Laravel's default asset directories, if you require a different base directory, you may begin any file path with ./. This instructs Elixir to begin at the project root, rather than using the default base directory.
For example, to compile a file located at app/assets/sass/app.scss and output the results to public/css/app.css, you would make the following call to the sass method:

1elixir(function(mix) {
2    mix.sass('./app/assets/sass/app.scss');
3});

elixir(function(mix) {
    mix.sass('./app/assets/sass/app.scss');
});

Stylus
The stylus method may be used to compile Stylus into CSS. Assuming that your Stylus files are stored in resources/assets/stylus, you may call the method like so:

1elixir(function(mix) {
2    mix.stylus('app.styl');
3});

elixir(function(mix) {
    mix.stylus('app.styl');
});


    
        

    
     This method's signature is identical to both mix.less() and mix.sass().

Plain CSS
If you would just like to combine some plain CSS stylesheets into a single file, you may use the styles method. Paths passed to this method are relative to the resources/assets/css directory and the resulting CSS will be placed in public/css/all.css:

1elixir(function(mix) {
2    mix.styles([
3        'normalize.css',
4        'main.css'
5    ]);
6});

elixir(function(mix) {
    mix.styles([
        'normalize.css',
        'main.css'
    ]);
});

You may also instruct Elixir to write the resulting file to a custom directory or file by passing a second argument to the styles method:

1elixir(function(mix) {
2    mix.styles([
3        'normalize.css',
4        'main.css'
5    ], 'public/assets/css/site.css');
6});

elixir(function(mix) {
    mix.styles([
        'normalize.css',
        'main.css'
    ], 'public/assets/css/site.css');
});

Source Maps
In Elixir, source maps are enabled by default and provide better debugging information to your browser's developer tools when using compiled assets. For each relevant file that is compiled, you will find a companion *.css.map or *.js.map file in the same directory.
If you do not want source maps generated for your application, you may disable them using the sourcemaps configuration option:

1elixir.config.sourcemaps = false;
2 
3elixir(function(mix) {
4    mix.sass('app.scss');
5});

elixir.config.sourcemaps = false;

elixir(function(mix) {
    mix.sass('app.scss');
});

Working With Scripts
Elixir provides several features to help you work with your JavaScript files, such as compiling ECMAScript 2015, module bundling, minification, and simply concatenating plain JavaScript files.
When writing ES2015 with modules, you have your choice between Webpack and Rollup. If these tools are foreign to you, don't worry, Elixir will handle all of the hard work behind the scenes. By default, the Laravel gulpfile uses webpack to compile Javascript, but you are free to use any module bundler you like.
Webpack
The webpack method may be used to compile and bundle ECMAScript 2015 into plain JavaScript. This function accepts a file path relative to the resources/assets/js directory and generates a single bundled file in the public/js directory:

1elixir(function(mix) {
2    mix.webpack('app.js');
3});

elixir(function(mix) {
    mix.webpack('app.js');
});

To choose a different output or base directory, simply specify your desired paths with a leading .. Then you may specify the paths relative to the root of your application. For example, to compile app/assets/js/app.js to public/dist/app.js:

1elixir(function(mix) {
2    mix.webpack(
3        './app/assets/js/app.js',
4        './public/dist'
5    );
6});

elixir(function(mix) {
    mix.webpack(
        './app/assets/js/app.js',
        './public/dist'
    );
});

If you'd like to leverage more of Webpack's functionality, Elixir will read any webpack.config.js file that is in your project root and factor its configuration into the build process.
Rollup
Similar to Webpack, Rollup is a next-generation bundler for ES2015. This function accepts an array of files relative to the resources/assets/js directory, and generates a single file in the public/js directory:

1elixir(function(mix) {
2    mix.rollup('app.js');
3});

elixir(function(mix) {
    mix.rollup('app.js');
});

Like the webpack method, you may customize the location of the input and output files given to the rollup method:
1elixir(function(mix) {
2    mix.rollup(
3        './resources/assets/js/app.js',
4        './public/dist'
5    );
6});

elixir(function(mix) {
    mix.rollup(
        './resources/assets/js/app.js',
        './public/dist'
    );
});
Scripts
If you have multiple JavaScript files that you would like to combine into a single file, you may use the scripts method, which provides automatic source maps, concatenation, and minification.
The scripts method assumes all paths are relative to the resources/assets/js directory, and will place the resulting JavaScript in public/js/all.js by default:

1elixir(function(mix) {
2    mix.scripts([
3        'order.js',
4        'forum.js'
5    ]);
6});

elixir(function(mix) {
    mix.scripts([
        'order.js',
        'forum.js'
    ]);
});

If you need to concatenate multiple sets of scripts into different files, you may make multiple calls to the scripts method. The second argument given to the method determines the resulting file name for each concatenation:

1elixir(function(mix) {
2    mix.scripts(['app.js', 'controllers.js'], 'public/js/app.js')
3       .scripts(['forum.js', 'threads.js'], 'public/js/forum.js');
4});

elixir(function(mix) {
    mix.scripts(['app.js', 'controllers.js'], 'public/js/app.js')
       .scripts(['forum.js', 'threads.js'], 'public/js/forum.js');
});

If you need to combine all of the scripts in a given directory, you may use the scriptsIn method. The resulting JavaScript will be placed in public/js/all.js:

1elixir(function(mix) {
2    mix.scriptsIn('public/js/some/directory');
3});

elixir(function(mix) {
    mix.scriptsIn('public/js/some/directory');
});


    
        

    
     If you intend to concatenate multiple pre-minified vendor libraries, such as jQuery, instead consider using mix.combine(). This will combine the files, while omitting the source map and minification steps. As a result, compile times will drastically improve.

Copying Files & Directories
The copy method may be used to copy files and directories to new locations. All operations are relative to the project's root directory:

1elixir(function(mix) {
2    mix.copy('vendor/foo/bar.css', 'public/css/bar.css');
3});

elixir(function(mix) {
    mix.copy('vendor/foo/bar.css', 'public/css/bar.css');
});

Versioning / Cache Busting
Many developers suffix their compiled assets with a timestamp or unique token to force browsers to load the fresh assets instead of serving stale copies of the code. Elixir can handle this for you using the version method.
The version method accepts a file name relative to the public directory, and will append a unique hash to the filename, allowing for cache-busting. For example, the generated file name will look something like: all-16d570a7.css:

1elixir(function(mix) {
2    mix.version('css/all.css');
3});

elixir(function(mix) {
    mix.version('css/all.css');
});

After generating the versioned file, you may use Laravel's global elixir helper within your views to load the appropriately hashed asset. The elixir function will automatically determine the current name of the hashed file:
1<link rel="stylesheet" href="{{ elixir('css/all.css') }}">

<link rel="stylesheet" href="{{ elixir('css/all.css') }}">
Versioning Multiple Files
You may pass an array to the version method to version multiple files:

1elixir(function(mix) {
2    mix.version(['css/all.css', 'js/app.js']);
3});

elixir(function(mix) {
    mix.version(['css/all.css', 'js/app.js']);
});

Once the files have been versioned, you may use the elixir helper function to generate links to the proper hashed files. Remember, you only need to pass the name of the un-hashed file to the elixir helper function. The helper will use the un-hashed name to determine the current hashed version of the file:
1<link rel="stylesheet" href="{{ elixir('css/all.css') }}">
2 
3<script src="{{ elixir('js/app.js') }}"></script>

<link rel="stylesheet" href="{{ elixir('css/all.css') }}">

<script src="{{ elixir('js/app.js') }}"></script>
BrowserSync
BrowserSync automatically refreshes your web browser after you make changes to your assets. The browserSync method accepts a JavaScript object with a proxy attribute containing the local URL for your application. Then, once you run gulp watch you may access your web application using port 3000 (http://project.dev:3000) to enjoy browser syncing:

1elixir(function(mix) {
2    mix.browserSync({
3        proxy: 'project.dev'
4    });
5});

elixir(function(mix) {
    mix.browserSync({
        proxy: 'project.dev'
    });
});

On this pageIntroduction
Installation & Setup
Running Elixir
Working With StylesheetsLess
Sass
Stylus
Plain CSS
Source MapsWorking With ScriptsWebpack
RollupScripts
Copying Files & Directories
Versioning / Cache Busting
BrowserSync
Laravel is the most productive way to
 build, deploy, and monitor software.
First name
Last name
Email address
By submitting this form, you agree to our terms. You can opt-out anytime.
© 2026 Laravel
Legal
StatusProducts
Cloud
Forge
Nightwatch
Vapor
NovaPackagesCashier
Dusk
Horizon
Octane
Scout
Pennant
Pint
Sail
SanctumSocialite
Telescope
Pulse
Reverb
Echo
Resources
Documentation
Starter Kits
Release Notes
Blog
News
Community
Larabelles
Learn
Jobs
Careers
Trust
Partners
Jump24
UCodeSoft
CACI Limited
Tighten
Threadable
64 Robots
Pixel
Redberry
Steadfast Collective
Vehikl
See All