Workflow with Grunt for campers

Hey there,

I built a workflow to work faster, it based on Grunt a task manager for web developer.


It’s doing the follows tasks:

  • reload the browser at each change with Livereload
  • Jade compilation to index.html
  • check the syntax Javascript with Jshint (you can configure the level in a dot file)
  • compile the javascript js/_main.js to js/main.js
  • sass compitaltion css/main.scss to css/maincss

The prerequisites necessaries:
You need Node, NPM and Grunt installed on your computer.
npm: https://docs.npmjs.com/cli/install
Node: https://nodejs.org/en/download/
Grunt: http://gruntjs.com/installing-grunt
Livereload extension Chrome, Safari or Firefox: https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei?hl=en

Clone the repo(Github)

git clone https://github.com/xavierartot/workflow-fcc my-project

Go to the folder(you can change the name of the folder)

cd my-project

Install the package NPM

npm install

Start Grunt and watch, compile…

grunt watch

In your browser click on Livereload extension.

If you have an issue use Github or this post, for other question ask on this post.

Happy coding :grinning:

EDIT: this week end I will make a video if people ask me.

Another workflow with Babel this time.
Is based on Gulp
Jade, Stylus, Babel et Brwoserify

EDIT: About the same than the workflow below, but faster and you can code with es6 or other version.
Browseryfy give you a reload with syncronisation with different computer, phone, etc.
Sourcemap, means, the code inspectore give you the exact line in the source file.

Thanks for sharing this! I was planning to do the same someday by making a simple front-end project generator for Yeoman, since I have been using very few dependencies and NPM scripts instead of a full build system.

1 Like

I added a sourcemap too