Table of Content

This is a four-parts article. There are few sections here.

Summary
  • Preface
  • Prepare
  • What's Next
Part One: NodeJS
  • Node Module
  • Bower
  • Grunt
  • Gulp
  • eyeglass
  • sw.js (webpack)
  • What's Next
Part Two: Ruby
  • Gemfile
  • SASS
  • Jekyll (Static Site Generator)
  • Sache (SASS extensions and Tools)
  • What's Next
Part Three: PHP
  • Composer
  • Conclusion

Node Module

You may skip this part, but If you are new to NodeJS, you should read the offical documentation first for both Node JS and NPM JS.

You may notice this package.json in root directory.

{
"name": "bootstrap",
"description": "The most popular front-end framework for developing responsive, mobile first projects on the web.",
"version": "3.3.7"
}

Node Module: package.json

Now you can install node modules in respective directory. NPM recognize information from package.json.

% cd ~/bootstrap/bootstrap-less-3.3.7/
% npm install

Node Module: npm install

A newly directory has been created

% tree -d node_modules | head -n 10
node_modules
├── abbrev
├── accepts
├── acorn
│   ├── bin
│   ├── dist
│   ├── rollup
│   └── src
│   ├── bin
│   ├── loose

Bower

Bower as General

You may skip this part, but If you are new to Bower, you should read the offical documentation first for Bower. The official site said that you should migrate to Yarn and WebPack.

Consider using sites directory. You can install bower globally.

% sudo npm install -g bower

Bower: NPM Install Bower

After this you can do something cool with bower such as install JQuery

% bower install jquery

Or something more complex, as the documentation said.

% bower install desandro/masonry

Bower: Install JQuery

Bower Inside Bootstrap.

Consider go back to bootstrap-less directory.

You may notice this bower.json in root directory.

{
"name": "bootstrap",
"description": "The most popular front-end framework for developing responsive, mobile first projects on the web.",
...
"dependencies": {
"jquery": "1.9.1 - 3"
}
}

Now you can also install dependencies (JQuery) directly using bower.

Bower: install inside bootstrap

Bower Outside Bootstrap.

You can also install bootstrap using Bower.

% bower install --save bootstrap-sass

Bower: Install Bootstrap Official


Grunt

Grunt as General

You may also skip this part, but If you are new to Grunt, you should read the offical documentation first for GruntJS.

Consider using sites directory. You can install grunt globally.

% sudo npm install -g grunt-cli

Grunt: NPM Install Grunt CLI

Grunt Inside Bootstrap.

Consider go back to bootstrap-less directory.

You may notice this Gruntfile.js in root directory.

module.exports = function (grunt) {
'use strict';

// Force use of Unix newlines
grunt.util.linefeed = '\n';
...
};

Now you can run command as in official documentation. This will generate all the files needed in respective dist directory.

% grunt dist

Grunt: dist

Or documentation.

% grunt docs

Grunt: docs

Or even test

% grunt test

Gulp

There is also alternative to grunt. I won’t cover much since bootstrap does not use it.

Reading

Some good read:

Preview

It can do something cool just like Grunt.

% gulp

Gulp: example


eyeglass

This is a tool to do SASS under NPM umbrella. I must admit, I do not know about it. Not yet.


sw.js (webpack)

I haven’t explore yet. I really a n00b in Javascript land.


What’s Next

There are, some interesting topic for Ruby, such as Gemfile, SASS, and Jekyll (SSG). Consider finish reading [ Part Two ].

Thank you for reading.