October 8, 2014 at 18:40

Automated template for front-end projects



    Man invented computers to perform most of the repetitive tasks for us. This allows us to save a lot of time and use it to the maximum benefit. And, since this article is about front-end development, there are a lot of such tasks in this area: compilation of css and js preprocessors, sprite assembly, image optimization, file minification, etc.


    Now prepros , codekit , grunt help us automate these tasks , gulp and similar tools.
    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 slow 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 to describe tasks in gulp seemed easier to me.


    With the beginning of a new project, I had to do the same job: 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 the previously used solutions. Thus, I have gathered a decent set that automates most of the routine tasks and allows me to concentrate on the development.

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

    This template is not a panacea. Each has its own needs and, probably, for the maximum benefit, you will have to configure it for yourself.

    What's under the hood?



    Automated Tasks



    • Stylus compilation ;
    • Compilation CoffeeScript ;
    • Compilation of Jade templates;
    • Build sprites and style generation for them (I previously published an article about this);
    • Adding vendor prefixes to properties;
    • Minification of css and js;
    • Image optimization.


    File structure



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

    builder- the folder in which lies gulpfilewith the gulp tasks, where the modules will lie nodeand from where I will run all the commands in the console.

    The folder srccontains all the source files of the project, and the folder builtis created and changed automatically when executing gulp commands.

    Folder contents src


    • assets

      • styles - project styles
      • images
        • design - images designed for website design
        • content - images used in page content

      • scripts
        • local - scripts written as part of this project
        • vendor - third-party libraries


    • templates

      • pages - page templates
      • blocks - blocks from which pages will be collected



    How does it work?



    In gulpfile.coffeedescribed tasks that perform a particular job. Task can be called individually and in groups. Group calling is the most common user case.

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

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

    Tasks



    • sprite- sprite generation based on the pictures that are in the folder config.paths.src.sprites.images.all;
    • coffee- compilation .сoffeefrom the folder local;
    • vendor- transfer scripts from the folder vendorto built;
    • stylus- compilation .styl;
    • images- Transfer pictures to a builtfolder;
    • jade- compilation of .jadetemplates;
    • 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 launching the necessary task.


    Task groups



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


    System requirements



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


    Installation



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



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

    1. Download and unzip the archive with the template;
    2. in the console, open the folder builderand enter npm i. The process of downloading and installing all of the package.jsonmodules listed will go .


    After the installation is completed, you can safely print gulpin the console and the task group will workdefault

    Problems



    If at startup the gulpsystem gives an error saying that the module was not found coffee-script/register, you need to set the NODE_PATH variable, which makes it clear to the system where the global modules are.

    Links to solutions:



    Conclusion



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

    • mixin kit for Stylus;
    • JSHint;
    • concatenation of js;
    • bower.


    There are also plans to prepare a grunt version with a similar functional.

    Quick links



    Tags:

    Also popular now: