Bootstrap CLI Webtools

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

Summary Part One: NodeJS Part Two: Ruby Part Three: PHP

Local Group

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

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 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

Or documentation.

% 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:

The Offical Documentation: GulpJS.
Tutorial by Baretto: Working with Sass, Bootstrap and Gulp

Preview

It can do something cool just like Grunt.

% gulp

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.

Bootstrap CLI Webtools - Part One