Skip to content

Instantly share code, notes, and snippets.

@primozcigler
Last active December 29, 2015 11:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save primozcigler/7665541 to your computer and use it in GitHub Desktop.
Save primozcigler/7665541 to your computer and use it in GitHub Desktop.
My tooling, the tools I use for the advanced web development which make my life easier

On my tooling

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.

Command line tools

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.

Browser & Extensions

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment