I usually send this file if someone is working on the same code as I do. Just a quick overview of my tooling. Hard punishment for the guys which don't listen to me.
Tool for scaffolding the project. It downloads and prepares the html/css/js files (or any other files and dependencies, depends on the generator used).
It also prepares the Gruntfile.js
, bower.json
(see sections below) and package.json
.
Usually used as:
$ yo webapp
Change webapp
with any other generator you use.
Yeoman is used only at the very beginning of the process, no need to use it or install it if you checkout the code form the existing repo.
As stated on the website:
Bower A package manager for the web
It keeps your project and dependencies decoupled. Which means you can easily install, update and/or remove libraries like jQuery, JS plugins, icons, frameworks (Bootstrap, Foundation, HTML5BP), etc. in your project and keep them out of your repository, because all the dependencies are saved in the bower.json file.
When installing just use the --save
or --save-dev
flags for updating the bower.json
and make sure you use $ bower init
if the bower.json file does not exist yet in the root of the project.
Always add the bower_components
folder (or any other configured folder in .bowerrc
file) to the .gitignore
. And never change the files there.
Task runner. In the modern web-based workflow, one usually needs to switch between the browser, CLI and your favorite text editor all the time. Here comes GruntJS, says $ grunt
(or $ grunt [yourTaskName]
) and you can forget about the browser and the CLI. At least for the CLI, you still need to check the changes in your browser if you configured the Grunt plugins like watch
or livereload
, but no need to hit the F5
key like a maniac.
You only configure the tasks in the Gruntfile.js and call the task.
CSS compilation (LESS, SCSS, ...), JS compilation (CoffeScript, ...), images optimization, minification, concatenation, linting are the tasks the Grunt loves to do for you. All with a single command. Setup once, go coding!
Used in fact just for the npm
, which is a package manager for node.js. It uses the package.json
file to install the node.js dependencies. When installing the new package, use the --save
or --save-dev
flag:
$ npm install less --save-dev
Always add the node_modules
folder to the .gitignore
. And never change the files there.
Used for the version controlling the project and collaboration. Private repos on BitBucket, public on GitHub.
For the development I prefer G Chrome Canary with Chrome DevTools docked on the right side of the window.
Enables you to connect your LiveReload Grunt task and the actual browser. Sometimes with the new Grunt tasks like connect
this is no longer needed, because the needed JS is injected to the browser from the server.