Automated template for front-end projects

Man has invented computers to do most of the repetitive tasks for us. This allows us to save a lot of time and use it with maximum benefit. And, since this article is about front-end development, there are many such tasks in this area: compiling css and js preprocessors, assembling sprites, optimizing images, minifying files, etc.


Now prepros , codekit , grunt , gulp and similar tools help us to automate these tasks.
I had experience with each of the 4 listed, but I stopped at gulp for the following reasons:
')

• Gulp is less demanding on system resources than GUI programs;
• he is very fast. Compared to gulp, grunt is slow. So slowly that I managed to switch from the editor to the browser and refresh the page, and the new styles were still not compiled. Gulp does it much better;
• The way I described tasks in gulp seemed easier to me.

Since the beginning of the new project, I had to do the same work: install gulp and the necessary modules, write tasks, organize the file structure of the project and create the necessary initial files. In each project I applied previously used solutions. Thus, I have a decent set that automates most of the routine tasks and allows you to concentrate on development.

At some point, I decided to create a base of developments, on the basis of which you can quickly start working on a new project. And I want to share this template with you.

This template is not a panacea. Everyone has their own needs and, probably, for maximum benefit, you will have to customize it for yourself.

What is under the hood?

Automated tasks

• Compiling Stylus ;
• Compilation of CoffeeScript ;
• Compiling Jade templates;
• Building sprites and generating a style for them (I previously published an article about this);
• Add vendor prefixes to properties;
• Css and js minification;
• Image optimization.

File structure

The first level of the project is the builder , src and built folders.

builder is the folder in which gulpfile with tasks for gulp is located, where the node modules will be located and from where all the commands in the console will run.

The src folder contains all the source files of the project, and the built folder is created and modified automatically when the gulp commands are executed.

Contents of the src folder

• assets
  
  
  • styles - project styles
  • images
    
    • design - images intended for site design
    • content - images used in the page content
    
    
  • scripts
    
    • local - scripts written for this project
    • vendor - third-party libraries
    
    
  
  
• templates
  
  
  • pages - page templates
  • blocks - the blocks from which the pages will be collected
  
  

How does everything work?

The gulpfile.coffee describes the tasks that do this or that job. Tasks can be called individually or in groups. Call groups - the most frequent yuzkeys.

All gulp plugins are loaded automatically from package.json using the gulp-load-plugins plugin. This reduces the volume of gulpfile.coffee .

All paths to files and folders are placed in variables and are described in the config.yml file.

Tasks

• sprite - sprite generation on the basis of images that are in the config.paths.src.sprites.images.all folder;
  
• coffee - compiling .offee from the local folder;
  
• vendor - transfer of scripts from folder to built in vendor ;
  
• stylus - compiling .styl ;
  
• images - transfer images to the built folder;
• jade - compile .jade templates;
• autoprefixer - add vendor prefixes (default settings);
• scripts:min - minification of scripts;
• styles:min - minification of styles;
• images:min - image optimization;
• watch - tracking changes in files and running the necessary task.

Task groups

• default - compiles templates, scripts, styles, collects sprites;
• dev - includes default and the watch task;
• minify - compresses files and optimizes images that were created after default ;
• prod - task that runs on the server or before uploading to the server. It executes the default group and then starts minify .

System requirements

• node.js;
• gulp;
• coffee-script - to run gulpfile.coffee. If you wish, you can translate .coffee to .js .
  

Installation

1. If you have not installed node.js, download and install. Together with node.js you will install the npm package manager;
2. Then install coffee-script and gulp by typing a command in the console (you will need administrator rights)

    npm i -g coffee-script gulp 

   
   

After these steps, you can proceed to initialize the project itself.

1. Download and unzip the archive with the template;
2. in the console, open the builder folder and type npm i . The process of downloading and installing all the modules listed in package.json begin.
   

After the installation is complete, you can safely type gulp in the console and work out the default task group

Problems

If, when starting gulp system gives an error that the coffee-script/register module is not found, you need to set the variable NODE_PATH, which makes it clear to the system where the global modules are located.

Links to solutions:

• http://stackoverflow.com/questions/9587665/nodejs-cannot-find-installed-module-on-windows
• http://stackoverflow.com/questions/12594541/npm-global-install-cannot-find-module

Conclusion

The template will be constantly refined. In the near future I am going to add the following functionality:

• set of mixins for Stylus;
• Jshint;
• concatenation js;
• bower

Also plans to prepare a grunt-version with the same functional.

Quick links

• Template repository - https://github.com/Krekotun/fabium
  
• node.js
• Gulp
• Stylus
• CoffeeScript
• Jade