Front-End Workflow is a boilerplate for front-end developers that automates front-end development workflows. Front-End Workflow is not a framework, nor it does any automated coding for you. It rather helps you to take care of all the repeating tasks every front-end developers faces while developing their projects. Thus it gives you the freedom to concentrate more on better coding keeping other hassles a side!
Below are the content list breakdown:
Front-End developers deal with so many different tasks to deliver a perfect UI front usable for it's users and obviously the browsers. On any new project we face a common problem - setting up a good development platform.
To achieve that most of us download same types of resources every time, do the redundant copy & pasting don't know how many times! We also do the browser testing, performance optimization, we need to compress images, check our css with CssLint, concatenate different JavaScript files and the list just goes on!
Front-End Workflow package comes up with features that helps you to be more productive yet efficient! Below you will find the dependencies included in this package.
Resources used in this project gives Front-End developers a common platform to kickstart with new projects. Please note: you can include your required resources for your project at anytime.
Add adding ....
You can add your dependency packages required for your project in bower.jsonfile. To control downloaded resources copied into it's right directory according their file type "exportsOverride": {} has been used. Get some more ideas about different options at grunt-bower-task.
Grunt - JavaScript Task Runner is used to configure all the repeating tasks like magnification, concatenation, linking, compress, live reload, combine, merge and list goes on. But for this package I have used few most common tasks runner. I will increase the list progressively. Lets Have a look at lists defined in package.json file.
You may like to do some searching to get your task CLI for your project too! Find it on Grunt.js Plugin list
Generate Documentation: Generate a project documentation automatically and publish it into your GitHub Pages using Groc. In our workflow we are loading a simple task plugin grunt-groc.
Make sure you have Node.js installed.
Open your terminal and clone Front-End-Workflow repository.
git clone https://github.com/themestent/front-end-workflow.git
You can also use GUI tools for Mac or Windows. You will need to use terminal anyway! Better get used to it!!
When you are done with the cloning get into the directory:
cd front-end-workflow
Now type ls just to have an overview on what you will be working with?
You will see two directories called app and doc. We will work on this directory for our front-end development process. doc has been automatically generated which you will be doing so very soon! But First let's try the following line on our terminal:
npm install
This command will start downloading all the depended libraries and packages defined into package.json file into a newly created node_modules directory. Downloaded packages are only available and works for the current project only.
When npm install finished downloading all it's packages you can run following line npm ls to see all the available packages downloaded inside node_modules. That tree view looks amazing right? It holds all types of dependencies we have mentioned on package.json file. Each of those packages has it's own role and certain tasks to process.
Ok now we have all required node modules installed locally for this project and we are ready to download some resources, files that we actually will require for Front-End Development project. In this workflow I will be using Twitter Bootstrap scss files, Bourbon - Sass Mixins Library, Some JavaScript plugins like FitText, FitVids, Echo etc. I want those to download and place those automatically into right directory according file type.
We can do this by typing following line on terminal:
grunt download
If you don't get any unwanted alien like error you will see line like these:
Running "bower:install" (bower) task
Installed bower packages
Copied packages to /Users/evanshajed/Working Projects/front-end-workflow/app
Cleaned bower dir /Users/evanshajed/Working Projects/front-end-workflow/components
Done, without errors.
Get inside app directory and you will see all the files are downloaded and placed to their right destination according to their file type. Then finally you will need to start grunt task to watch and build whenever any changes occurs in files or directories mentioned in Gruntfile.js. To start this task type this line:
grunt
You will then see several process starts running and waiting for changes. Start your usual development process inside app directory. Just to get used to this workflow start with index.html file. Include some image inside img or make some changes inside scss files. Grunt will generate, concatenate .js files, build scss to css files and reload the browser for you.
Last Edited on: 10 April 2014.
Front-End Workflow by Shajed Evan is licensed under a Creative Commons Attribution 4.0 International License.
Based on a work at http://themestent.github.io/front-end-workflow/.