"... cut a hole in a box ..."
- ๐ Ruby Environment Manager
$ brew install rbenv ruby-build
- ๐ Install Required Gems
bundle install
- ๐บ Homebrew
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
- ๐ฃ Node
brew install node
- โ Gulp
npm install -g gulp # Installed as a global CLI tool
- ๐ฆ Bower
npm install -g bower # Installed as a global CLI tool
"... put your junk in that box ..."
First, in order to save these dependencies w/o committing each node module, we need to create a package.json
file that will house all of the information about the thing that we're building. We can use Node's built in initializing tool to handle all the basic information. We do this by executing npm init
and answering the prompts.
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sane defaults.
See "npm help json" for definitive documentation on these fields
and exactly what they do.
Use "npm install <pkg> --save" afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
name: (Front End) frontend-build-tool
version: (1.0.0) 0.0.1
description: Does everything we want to automate for my frontend build process.
entry point: (index.js) gulpfile.js
test command:
git repository: https://github.com/ThatGuyCND/frontend-build-tool
keywords: gulp automation, frontend, sass
author: Erik Baldwin <[email protected]
license: (ISC) MIT
results in a package.json file in the root of our cwd:
{
"name": "frontend-build-tool",
"version": "0.0.1",
"description": "Does everything we want to automate for my frontend build process.",
"main": "gulpfile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://github.com/ThatGuyCND/frontend-build-tool"
},
"keywords": [
"gulp",
"automation",
"frontend",
"sass"
],
"author": "Erik Baldwin <[email protected]>",
"license": "MIT",
"bugs": {
"url": "https://github.com/ThatGuyCND/frontend-build-tool/issues"
},
"homepage": "https://github.com/ThatGuyCND/frontend-build-tool"
}
Having the package file means that we don't have to include ./node_modules
in our code repository, making it easier to share. When someone else wants to use this tool, the would simply checkout the repository and run npm install
in the root; all specified package dependencies will be downloaded. The only thing we'll manually update for the time being is the test key - we don't want to fail our build just because we didn't specify a test. Change the following: "test": "echo \"Error: no test specified\" && exit 1"
=> "test": "echo \"Warning: no test specified\" && exit 0"
Local Node Modules:
- Gulp because we need it locally too
npm install --save-dev gulp
- Bower we want it locally in case a user doesn't have it installed globally
npm install --save bower
Other modules for things we want to do:
- Compile our Sass files
- Gulp Ruby Sass
=> $ npm install --save-dev gulp-ruby-sass
- Gulp Ruby Sass
- Prefix our style properties, for those browsers that we dare not mention
- Gulp Autoprefixer
=> $ npm install --save-dev gulp-autoprefixer
- Gulp Autoprefixer
- Concat multiple files into one
- Gulp Concat
=> $ npm install --save-dev gulp-concat
- Gulp Concat
- Minify/Uglify our scripts
- Gulp Uglify
=> $ npm install --save-dev gulp-uglify
- Gulp Uglify