Using Elixir with Laravel

Published on Author craigzearfossLeave a comment
  • Elixir is a wrapper around Gulp that creates useful syntax.
  • package.json is the node equivalent of composer.json.
  • npm install is the node equivalent of composer install.
  • Preliminary setup:

    Install Node on you system.
        sudo apt-get update
        sudo apt-get install nodejs
        sudo apt-get install npm
        sudo apt-get install libnotify-bin
        sudo ln -s /usr/bin/nodejs /usr/bin/node
    
    Install Gulp on your system
        sudo npm install --global gulp
    
  • Install the npm package dependencies.
    Change to the project directory.
    npm install


Sass Compilation

  • gulp.js is where you define what you need to have done.
  • Your sass files go in the directory public/assets/css.
  • Your sass css files are output to the directory /public/css/sass.
  • To compile your sass code just run the gulp command.
  • To compile a single sass file.
    elixir(function(mix) {
        mix.sass('app.scss');
    });
    
  • To compile multiple sass files use an array.
    elixir(function(mix) {
        mix.sass(['app1.scss', 'app2.scss', 'app3.scss']);
    });
    
  • You can use a second parameter to specify the path or full path and file name of the output css file.
    // specify the path
    elixir(function(mix) {
        mix.sass('app.scss', './public/css');
    });
    
    // specify the file name
    elixir(function(mix) {
        mix.sass('app.scss', './public/css/app.css');
    });
    
  • You can chain together multiple sass calls to output multiple files.
  • To minify the css use the –production parameter when running gulp.
    gulp --production
  • The default Elixir settings are in the Config.js file. You can override a lot of them by adding lines in the gulp.js file. For example.
    elixir.config.assetsDir = 'app/assets'
    

Leave a Reply

Your email address will not be published. Required fields are marked *