My front-end stack that changes day to day :)

Here is a demo of the installation and a rundown of features. https://www.youtube.com/watch?v=nNmILmypXyU

$ npm install -g bower

$ npm install -g gulp

$ npm install -g gulp-hologram

$ gem install bundler

$ git clone [email protected]:heyMP/frontend-dev.git

$ cd frontend-dev

$ npm install

$ bower install

$ bundle install

If you receive any Drush errors that contain Segmentation fault run npm install, WITHOUT sudo. There are occasions where the npm cleanup script doesn't run when using sudo.

$ gulp server

If you are using this stack on a server rendered website then run gulp without its built in server:

$ gulp

Bower makes it extremely easy to add new third-party libraries to your project. Front-end dev makes that process even easier by automatically pulling those javascript and css files from bower into your project via gulp.

The first step is to run:

$ bower install bootstrap --save

Notice the --save flag. Not only does this add Bootstrap to the list of your project dependencies, it also lets Front-end Dev know to automatically pull any javascript or css resources into our existing project.

Now run:

$ gulp build

This will allow gulp to parse through the list of bower dependencies and create third-party.js and third-party.css files.

Sometimes there will be lots of javascript and css files that will be packaged with a library. You'll want to use Bower's 'override' option specify which files you want to be pulled into your project.

Edit the 'bower.json' file. You will see an option in the json array for 'overrides'. here is where you have a few options.

  "overrides": {
    "bootstrap": {
      "main": js/tooltip.js"
    }
  }

  "overrides": {
    "bootstrap": {
      "main": ["js/tooltip.js", "js/modal.js"]
    }
  }

  "overrides": {
    "bootstrap": {
      "ignore": "true"
    }
  }

To see all of the available options, visit the main-bower-files website.