September 24 , 2016

The following issues will be covered: working with sass styles using sourcemaps, gluing and compressing js files, building requirejs using rjs, html preprocessing, cleaning and copying files, optimizing images, raising a local web server and monitoring mode - watch tasks. Welcome to the article, there will be a lot of interesting things!
P.S. There is a lot of material, so the article will be divided into 3 parts: the basics of assembly and project organization, writing a test application on Backbone + Require.js and the actual assembly using gulp.

Why is frontend assembly necessary?

One of the most important principles in development is modularity. Splitting the project code into many small, ideally loosely connected pieces-modules. This applies not only to javascript code. This applies to styles, html templates, and various libraries.

This is what the structure might look like simple application, written in Backbone + Require.

And it's small test project, V real application There can be hundreds and thousands of files. Forcing the user's browser to make hundreds of http requests is inhumane, to say the least. We must provide the maximum fast loading service we wrote. Therefore, one of the most important tasks of assembly tools is minification, reducing the number of project files, gluing them into bundles. At the output we should have a more concise structure, for example, like this:

The difference is clearly visible: instead of dozens of files, we have one index.html, one css file, optimized and compressed images in a separate folder, although this is not visible in the screenshot :-)

And also the most interesting thing: in the js folder we received only 3 compressed files.
P.S. I’ll tell you later why three and not one.
Note that this is the actual structure of the test application that we will write soon.

I've only described one reason to use build tools, but it's already enough to get you started using gulp, grunt, webpack or something similar in your projects. Moreover, it doesn’t matter whether we are writing a huge service, a small SPA (as in our article) or a landing page. The principles of assembly are the same for all projects and differ only in the variety of tasks and approaches to solving them. In our example, we will create a structure that can expand as much as we like in the future, but the output will always be a neat stack of files, ready to be uploaded to your production site - the production site.

How to properly organize a project.

The principle is this: there is a section with development files, there is a section with collected files, and everything else that this stuff serves. Let's create 2 folders in the project root: src and build. In src and only in src we will work, create new files, edit them and generally have fun. In the screenshot above, where there are a couple of dozen files, you saw exactly the contents of the src folder of our test project. And just below are a few neat files from the build folder. It is generated only automatically, using assembly tools; you don’t need to edit anything there yourself. Still, with each build, its contents are overwritten by new files (and in development mode there is no build folder at all - it is deleted so as not to be an eyesore)

In addition to src and build, the root will contain the files package.json, gulpfile.js, the node_modules folder and, optionally, .gitignore (if you work with Git). You can also see the logs folder - this is a product of apache and a long-standing habit of keeping project logs in its own folder, of course, excluding it from the Git repository :-)

This is what the entire project structure looks like:

I think there are no questions about the contents of build, but I’ll explain in more detail about src:

• 1. html - index.html, the root index file of the project. Why not immediately in the root src? Because it will be preprocessed and created by gulp. We’ll find out how a little later, when we get serious about the assembly.
• 2. img - images, not compressed, regular
• 3. js - all the javascript movement of the project, model and view Backbone
• 4. lib - third-party libraries, like backbone.js, require.js, lodash.js and others
• 5. scripts - js scripts that are necessary on a production site, but are not needed in development mode. This refers to codes for analytics, various experiments and other marketing things.
• 6. styles - sass files with styles. The assembled css file will be placed in the same folder (only for development mode)
• 7. tpl - html templates. Used by Backbone views using the require.js text plugin

The appearance of the test application is rather plain. You can say that this kind of crap is done with a couple of lines of html and css code without a single js file.
But our goal is not to paint a pretty picture, but to create a solid project structure and consider as many aspects of the build as possible. When the project grows to hundreds of files, we will be ready for this misfortune and can easily cope with the increased volumes. Therefore, despite the smallness and outward wretchedness of the test application, we will learn the principles of assembly for large and complex projects.

What assembly problems will we solve?

Let me remind you that we agreed on two build modes: development and production. We will write all our tasks keeping these two modes in mind. We do not need all operations during the development process, and not all in the assembly for production.

Here is a list of what we will do after writing the test application:

• 1. Cleaning files and folders from the results of the previous build
• 2. Building css from sass files, with and without compression
• 3. Connecting sourcemaps to styles, at the same time I’ll show with an example why this is needed
• 4. Building a js bundle using requirejs
• 5. Gluing and compression of individual js files (analytics)
• 6. HTML preprocessing
• 7. Image optimization and compression
• 8. Raising a local web server
• 9. Tasks of monitoring files when working in development mode - watch tasks
• 10. Collecting individual tasks into a heap - final tasks for production builds and development work

So, we discussed why we need to build a frontend at all, decided on the structure of the project, analyzed in detail what we want from the build, and talked in general terms about the test application. In the next part of the article, we will write a simple Backbone application in conjunction with Require.js. If you are not familiar with Backbone and/or Require.js, then there is nothing to worry about. Actually, there is little Backbone code in the application. You can easily use your favorite library instead or just write javascript/jquery code and skip the requirejs configuration section.

Compress images, JS and CSS files to optimize the loading of web pages and much more. To simplify this process, we suggest you use the assembly Gulp projects 4, which is constantly being improved by Andrey Gorokhov. Below you will find download links, but for now let’s go over the main points: description and installation.

Gulp Project Builder

Gulp is a project builder, a tool for automating the tasks described above. It will help you speed up your work and properly prepare your project for release.

You can download the assembly from the Github repository or via the Git command line. In the future, you can customize it to suit your needs.

Peculiarities

• naming classes according to BEM
• BEM structure is used
• SCSS preprocessor is used
• uses the Babel transpiler to support modern JavaScript (ES6) in browsers
• Webpack is used to build JavaScript modules
• CSS smart-grid based on Bootstrap is used for fast adaptive layout
• strict code guide is used

Installation

• install NodeJS (if required) and Yarn
• download the build using Git: git clone https://github.com/andreyalexeich/gulp-scss-starter.git
• install gulp globally: yarn global add gulp-cli
• go to the downloaded folder with the assembly: cd gulp-scss-starter
• download the required dependencies: yarn
• to get started, enter the command: yarn run dev (development mode)
• to build the project, enter the command yarn run build (build mode)

If you did everything correctly, your browser should open with the local server. Build mode involves optimizing the project: compressing images, minifying CSS and JS files for uploading to the server.

If you have problems with the installation, watch this video:

File structure

gulp-scss-starter ├── dist ├── gulp-tasks ├── src │ ├── blocks │ ├── fonts │ ├── img │ ├── js │ ├ ── styles │ ├── views │ └── .htaccess ├── gulpfile.babel.js ├── webpack.config.js ├── package.json ├── .babelrc.js ├── .bemrc.js ├── .eslintrc.json ├─ ─ .stylelintrc ├── .stylelintignore └── .gitignore

• Folder root:
  • .babelrc.js - Babel settings
  • .bemrc.js - BEM settings
  • .eslintrc.json - ESLint settings
  • .gitignore – prohibits Git from tracking files
  • .stylelintrc - Stylelint settings
  • .stylelintignore – prohibits Stylelint from tracking files
  • gulpfile.babel.js - Gulp settings
  • webpack.config.js - Webpack settings
  • package.json - list of dependencies
• src folder - used during development:
  • BEM blocks: src/blocks
  • fonts: src/fonts
  • images: src/img
  • JS files: src/js
  • site pages: src/views/pages
  • SCSS files: src/styles
  • HTML files: src/views
  • Apache web server configuration file with gzip settings (lossless compression): src/.htaccess
• The dist folder is the folder from which the local development server is launched (when running yarn run dev)
• Folder gulp-tasks - folder with Gulp tasks

Teams

• yarn run lint:style - check SCSS files. For VSCode you need to install the plugin. For WebStorm or PHPStorm, you need to enable Stylelint in Languages ​​& Frameworks - Style Sheets - Stylelint (errors will be corrected automatically when saving the file)
• yarn run lint:style --fix - fix errors in SCSS files
• yarn run dev - launch the server for project development
• yarn run build - build a project with optimization without starting the server
• yarn run build views - compile Pug files
• yarn run build styles - compile SCSS files
• yarn run build scripts - build JS files
• yarn run build images - build images
• yarn run build webp - convert images to .webp format
• yarn run build sprites - build sprites
• yarn run build fonts - build fonts
• yarn run build favicons - build favicons
• yarn run build gzip - build Apache configuration

Component-based approach to website development

• Each BEM block has its own folder inside src/blocks/modules
• the folder of one BEM block contains one HTML file, one SCSS file and one JS file (if the block uses a script)
  • The block HTML file is imported into the src/views/index.html file (or required file pages from which the block will be called)
  • The block SCSS file is imported into the file src/blocks/modules/_modules.scss
  • The block JS file is imported into src/js/import/modules.js

Example of a folder structure with a BEM block:

Blocks ├── modules │ ├──header │ │ ├── header.html │ │ ├── header.js │ │ ├── header.scss

In order not to manually create the corresponding folder and files, just enter the command bem create my-block in the console to create a BEM block folder, where my-block is the name of the BEM block

Project pages

• The project pages are located in the src/views/pages folder
  • home page: src/views/index.html

Fonts

• fonts are in the src/fonts folder
  • use .woff and .woff2 formats
  • fonts are included in the file src/styles/base/_fonts.scss
  • You can convert local fonts using this service

Images

• the images are in the src/img folder
  • The image for favicon generation must be located in the src/img/favicon folder and have a size of at least 1024px x 1024px
  • images are automatically converted to .webp format. detailed information according to use .

Third party libraries

• all third-party libraries are installed in the node_modules folder
  • to download them use the command yarn add package_name
  • to connect library JS files, import them at the very beginning of the BEM block JS file (that is, the BEM block that the script uses), for example:

  Import $from "jquery";

  • to connect library style files, import them into the file src/styles/vendor/_libs.scss
  • JS files and style files of libraries cannot be modified independently

⚠️ If your project uses several libraries that need to be included on several pages, to avoid errors you need to:

• create a pages folder along the path src/js/import
• in the pages folder, create a js file for the page, for example, pageA.js , and import a library there that will be used only on this page
  • do the same step for additional pages
• in the webpack.config.js file add page js files to the entry point, example:

Entry: (main: " ./src/js/index.js",pageA: " ./src/js/import/pages/pageA.js", pageB: " ./src/js/import/pages/pageB.js" }

• connect the compiled js files on the required pages

CSS smart-grid

The collector includes the smart-grid CSS grid from Dmitry Lavrik. It allows you to get rid of unnecessary classes in markup through the use of mixins in SCSS and speeds up adaptive layout. The configuration is already set up according to the Bootstrap grid. Usage example:

Items ( @include row-flex (); @include md (justify-content, center); .item ( @include col (); @include size (3); @include size-md (5); @include size- xs (10 ); ) )

Want to score more on Google Page Speed? Don’t know what “front-end assembly” is? Then it will be interesting for you to come here.

What is Node.JS?

Node.JS is commonly called “Northern JavaScript”. This platform allows you to write programs using JavaScript syntax.

There are implementations for Windows, Mac OS and Linux.

Package manager included NPM, with which you can install packages.

What is Gulp?

Gulp is a package written in Node.JS that helps webmasters build projects at the layout stage.

To install Gulp you need to use the command line.

Npm install gulp

At the end of this article there is a file that will help you assemble a standard project.

In this example we will do the following using Gulp:

• Automatically optimize images for the web;
• We collect one minified style file from preprocessors (SASS, SCSS);
• We collect one minified file with scripts.

How to build front-end using Gulp?

To understand how everything works, let's take it step by step.

The structure can be seen in the screenshot.

• The assets folder is for sources of images, styles and scripts;
• Public folder - the result of building the project will be located in it;
• gulpfile.js - a file that describes the logic of the collector;
• package.json is a file that contains information about programs and plugins used to make Gulp work correctly.

package.json

File contents:

( "name": "gulp_project", "version": "1.0.0", "description": "Example", "main": "gulpfile.js", "scripts": ( "test": "echo\" Error: no test specified\" && exit 1"), "author": "Dmitriy Ilichev", "license": "ISC", "devDependencies": ( "gulp": "^3.9.0", "gulp-csso ": "^1.0.0", "gulp-concat": "^2.6.0", "gulp-uglify": "^1.2.0", "gulp-imagemin": "^2.3.0", "gulp -sass": "^2.1.1" ) )

From this file the following is clear:

• Project name gulp_project, version and description;
• The main file is gulpfile.js;
• The author of the project, the license - all this is not so important and these fields can simply be empty;
• An interesting point is devDependencies. It describes the dependencies.

The file can be edited normally text editor. It can also be created for a new project with the npm int command.

Based on this, Node.JS understands that to work we will need:

• Gulp version 3.9.0 and higher for assembly;
• Gulp-csso version 1.0.0 and higher - plugin for minifying styles (css);
• Gulp-concat version 2.6.0 and higher is a plugin for merging several files into one;
• Gulp-uglify version 1.2.0 and higher - plugin for javascript minification;
• Gulp-imagemin version 2.3.0 and higher - plugin for image optimization;
• Gulp-sass version 2.1.1 and higher is a plugin for getting css from sass (scss).

Great! After that you need to install all this. This is done from command line. While in the project folder, you need to run the command:

Npm install

All necessary information will be taken from package.json .

After all this magic, the node_modules service folder will appear.

gulpfile.js

File contents:

/* * * Define variables * */ var gulp = require("gulp"), // Actually Gulp JS uglify = require("gulp-uglify"), // JS minification concat = require("gulp-concat"), // Gluing files imagemin = require("gulp-imagemin"), // Minifying images csso = require("gulp-csso"), // Minifying CSS sass = require("gulp-sass"); // Convert SASS (SCSS) to CSS /* * * Create tasks (tasks) * */ // Task "sass". Launched by the command "gulp sass" gulp.task("sass", function () ( gulp.src("./assets/styles/style.scss") // file to be processed.pipe(sass().on(" error", sass.logError)) // convert sass to css .pipe(csso()) // minify the css obtained in the previous step.pipe(gulp.dest("./public/css/")); // We write the result to the specified address)); // Task "js". Run by the command "gulp js" gulp.task("js", function() ( gulp.src([ "./assets/javascripts/jquery-2.1.4.min.js", "./assets/javascripts/bootstrap. min.js", "./assets/javascripts/script.js" ]) // files that we process.pipe(concat("min.js")) // merge all JS .pipe(uglify()) // minify the resulting "footcloth".pipe(gulp.dest("./public/js/")) // write the result to the specified address )); // Task "images". Run by the command "gulp images" gulp.task("images", function() ( gulp.src(".assets/images/**/*") // take any files in the folder and its subfolders.pipe(imagemin() ) // optimize images for the web.pipe(gulp.dest("./public/images/")) // write the result to the specified address )); // Task "watch". Launched by the "gulp watch" command // It monitors file changes and automatically launches other tasks gulp.task("watch", function () ( // When changing *.scss files in the "styles" folder and subfolders, launch the sass gulp task. watch("./assets/styles/**/*.scss", ["sass"]); // When changing *.js files in the "javascripts" folder and subfolders, run the js task gulp.watch("./assets/ javascripts/**/*.js", ["js"]); // When changing any files in the "images" folder and subfolders, run the images task gulp.watch("./assets/images/**/*", ["images"]); ));

The main trick is in the task watch. Having launched it once, you can easily work with sources, and the project will be automatically assembled every time you save edited files.

As a result, we will receive a template ready for publication on the Internet.

Tasks can be run separately. As a result, in the archive at the end of the article you will find the following:

! note The fact is that after unpacking this archive, you will first need to run the npm install command. This folder contains quite a large number of files, and copying/pasting them every time is a waste of time.

In custody

There are tons of other useful plugins. For example, the excellent template engine Jade, which speeds up writing significantly html code, someone may need LESS and so on.

The presented example is just a platform and a template from which you can quickly and without special knowledge start using all these wonderful features.

Gentleman's set Front-end developer

It's no secret that a modern front-end developer must have one of the project assembly tools in his arsenal, such as Gulp or Grunt. Until some time, Grunt held a monopoly in this matter, but a group of developers that separated from Grunt decided to create their own lightweight and fast task manager Gulp.

In this article, we will prepare a starter package from scratch for use in future projects.

What technologies do we use?

• Software platform: Node.js
• CSS pre-processor: Stylus
• Task manager: Gulp

Why does a frontender need a task manager?

Until recently, I myself wondered why I needed to spend time setting up the task manager config, if I was already doing a good job with layout layouts, until I started using CSS pre-processors.

CSS pre-processors are really convenient and speed up the writing of styles, but compiling code written on a pre-processor into regular CSS is not a completely trivial task that can be solved with one button. This is where the task manager comes to our aid. Code conversion doesn’t just happen at the click of a button, everything happens online without your participation (of course, if you configure everything correctly).

Of course, the task manager’s tasks go far beyond the processes associated with converting pre-processor code into pure CSS. The project builder also deals with minification, concatenation, checking code for errors, assembling images into sprites, optimizing images for the web, etc. You simply create many logically separated files in your project, which are then conveniently collected into one directory, already processed and ready for use in the browser. But more on that a little later, but now let’s start with the preparation.

Installing Node.js

If you know how to install node.js on your system and are using it, you can safely move on to the next title.

I would like to immediately warn you that all the described actions are relevant for Mac OS X, but generally applicable to others Unix systems Development via task manager and command line in Windows somewhat more difficult and will not be described here. However, if you still use Windows and are not ready to give it up, then I can suggest a use case virtual machine with installed Ubuntu, I use this option on mine home system, which is generally quite convenient.

So, first of all, we have to download and install the node.js package on our system to work with the node through the console. Go to the official node.js website and download the latest stable version for your system. Once installed, the node command should be available on your command line. To check that your node is running, enter the command on the command line

the response should show the version of installed node.js. If everything is good, we move on.

Project directory structure

In our projects we will use a unified version of the structure:

Develop - development root directory└─start - project directory├─build - build assembled by the task manager├─resource - all source files for development (.psd, etc.)├─src - development directory│├─css - style development directory││├─images - all static images││├─sprites - image collected into a sprite││├─partial - user files styles│││├─mixins.styl - custom mixins│││└─styles.styl - custom styles││├─vendor - other external files styles││└─styles.styl - main style file│├─fonts - font directory│├─img - catalog of dynamic images│├─js - JavaScript development directory││├─_*.js - side js files││├─_main.js - basic custom js││└─main.js - main js file│├─.htaccess - config for the server│├─*.html - page layout files│├─pages.html - a file with links to all pages of the template│├─index.html - page layout index file│└─include - directory of included markup files│ └─*.html - included markup files (header.html, etc.)├─package.json - npm package manager config├─gulpfile.js - Gulp config├─stylus.template.mustache - mask for reading sprites├─TODO - todo sheet└─.gitignore - config for Git

Installation

In the console, using the cd command, go to the root development directory, create a directory for our project mkdir start and go to it.

Let's install our structure for the project via the console:

mkdir build resource src src/css src/css/images src/css/sprites src/css/partial src/css/vendor src/js src/template src/template/include src/img src/fonts

Let's create initial files in the project structure:

touch gulpfile.js stylus.template.mustache .gitignore src/.htaccess src/TODO src/css/styles.styl src/css/partial/styles.styl src/css/partial/mixins.styl src/js/main.js src/js/_main.js src/template/pages.html src/template/index.html src/template/include/header.html src/template/include/footer.html

Let's create package.json

All pop-up questions can be clicked via Enter, node will set them to default values, or you can fill in the suggested fields.

.gitignore

We tell Git which directories to ignore and not upload to the repository:

/node_modules/ /build/ /resource/

The node_modules directory will appear later after installing the plugins and will contain all the node plugins for the project.

src/.htaccess

We install additional gzip compression and caching for the server:

AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript # Serve gzip compressed CSS files if they exist # and the client accepts gzip. RewriteCond "%(HTTP:Accept-encoding)" "gzip" RewriteCond "%(REQUEST_FILENAME)\.gz" -s RewriteRule "^(.*)\.css" "$1\.css\.gz" # Serve gzip compressed JS files if they exist # and the client accepts gzip. RewriteCond "%(HTTP:Accept-encoding)" "gzip" RewriteCond "%(REQUEST_FILENAME)\.gz" -s RewriteRule "^(.*)\.js" "$1\.js\.gz" # Serve correct content types, and prevent mod_deflate double gzip. RewriteRule "\.css\.gz$" "-" RewriteRule "\.js\.gz$" "-" # Serve correct encoding type. Header append Content-Encoding gzip # Force proxies to cache gzipped & # non-gzipped css/js files separately. Header append Vary Accept-Encoding ExpiresActive on ExpiresByType application/javascript "access plus 1 month" ExpiresByType image/jpg "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType image/gif "access plus 1 month" ExpiresByType image/png "access plus 1 month" ExpiresByType text/css "access plus 1 months"

src/css/styles.styl

Let's include custom style files into the main style file:

@import "partial/styles"

Please note that for connection.styl files, the extension is not specified, according to the semantics of the Stylus pre-processor code. To include styles in another extension, for example .css, the latter is required.

TODO

This page contains a development todo sheet. You can read more about working with this file on the PlainTasks plugin page for Sublime Text.

This completes the installation of the structure.

Installing plugins using the npm package manager

Node.js by default includes the npm package manager, whose repositories contain many plugins that we will work with.

Installing the Gulp plugin

First we need to install Gulp globally (with the -g switch) on our system

npm install gulp -g

You only need to do this once, further global installation is not required.

Now you need to install Gulp locally in your project directory

npm install gulp --save-dev

The --save-dev switch means that information about the plugin (name in the repository and its version) will be added to the package.json config and will remember it for this project. Since we do not store a heavy folder with node_modules plugins in Git, the information about installed plugins saved in the config will allow you to deploy all the necessary plugins in the project with just one npm i command.

There are abbreviations for each command, so we can write the command above in a shorter format

In the future we will also use the shortened command format.

Stylus plugin for Gulp

In our projects we use the Stylus pre-processor, which works great and compiles on the node.

Install:

npm i gulp-stylus -D

CSS processing plugins

Autoprefixer- automatically inserts the prefixes -ms- -o- -moz- -webkit- into the required properties:

npm i gulp-autoprefixer -D

CSS minification- the plugin minifies the output CSS file, eliminating unnecessary spaces and tabs:

npm i gulp-minify-css -D

Image processing plugins

Combining pictures into sprites- you no longer need to spend hours of precious time combining all the images into sprites and then calculating their coordinates, this plugin will do all this automatically for you:

npm i gulp.spritesmith -D

Let's add a mask for calculating positions in sprites to the previously created stylus.template.mustache file:

((#items)) $((name)) = ((px.x)) ((px.y)) ((px.offset_x)) ((px.offset_y)) ((px.width)) (( px.height)) ((px.total_width)) ((px.total_height)) "(((escaped_image)))"; ((/items))

Let's add special mixins to mixins.styl:

SpriteWidth($sprite) width $sprite spriteHeight($sprite) height $sprite spritePosition($sprite) background-position $sprite $sprite spriteImage($sprite) background-image url($sprite) sprite($sprite) if !match( "hover", selector()) && !match("active", selector()) spriteImage($sprite) spritePosition($sprite) spriteWidth($sprite) spriteHeight($sprite)

Let's connect the mixins and the generated file with coordinates to the main styles file src/css/styles.styl:

@import "partial/sprite" @import "partial/mixins"

Please note that sprite files must be included before user styles @import "partial/styles"

Optimizing images for the web- the plugin will automatically cut out all unnecessary information from your images and compress them to the optimal size, which in some cases will allow you to reduce the volume of images by up to 90%:

npm i gulp-imagemin -D

JavaScript processing plugins

JS minification- the plugin minimizes your JS code as much as possible, reducing its loading time:

npm i gulp-uglify -D

JS Error Tracking- the plugin will thoroughly check your JS code to identify all inconsistencies and display them in the console:

npm i jshint gulp-jshint -D

HTML processing plugins

Included files- the plugin allows you to store static parts of the site, such as header, footer, aside, etc., in separate files and connect them in any part of another file. In case of minor changes in the header, there is no longer a need to change dozens, or even hundreds html pages template:

npm i gulp-rigger -D

The plugin is also compatible with JS.

Let's connect custom JS to the main JS file src/js/main.js with the following construction:

//= _main.js

Let's include the files header.html and footer.html in index.html

//= include/header.html//= include/footer.html

Other plugins

LiveReload- the plugin eliminates the need to reload the page in the browser every time to see the changes, now this happens automatically when saving the changed file:

npm i gulp-connect -D

Preventing Gulp from crashing- sometimes it happens that Gulp can crash out of watch mode if critical errors occur (mainly due to JS). This plugin tries to keep Gulp processes running whenever possible:

npm i gulp-plumber -D

Renaming files- the most common work with file names. The plugin allows you to completely rename files, change the extension, add prefixes and postfixes, for example, to convert a file like style.styl to style.min.css:

npm i gulp-rename -D

Cleaner- sometimes there is a need to completely clean out the build directory, here a plugin comes to our aid:

Sourcemap- in order for your files to remain readable through browser debugging after minification, you need to add a sourcemap to the minified files:

npm i gulp-sourcemaps -D

Advanced watch features- the plugin makes watch smart, now it does not overwrite all files in the build when just one file is changed, the specific changed file is overwritten, which saves time and resources:

npm i gulp-watch -D

Let's check package.json

After all installed plugins, let's check our package.json. It should look something like this:

( "name": "start", "version": "1.0.0", "description": "Start pack for Front-end develop", "author": "Ivan Ivanov", "license": "MIT", "dependencies": (), "devDependencies": ( "gulp": "latest", "gulp-autoprefixer": "latest", "gulp-connect": "latest", "gulp-imagemin": "latest", "jshint": "latest", "jshint-stylish": "latest", "gulp-jshint": "latest", "gulp-minify-css": "latest", "gulp-plumber": "latest", "gulp-rename": "latest", "gulp-rigger": "latest", "gulp-sourcemaps": "latest", "gulp-stylus": "latest", "gulp-uglify": "latest", "gulp-watch": "latest", "gulp.spritesmith": "latest", "rimraf": "latest") )

Instead of latest, in your case specific versions of installed plugins will be specified. Because we are building our starter package that will be used in many projects, it is also recommended to replace the version values ​​with latest to always install current versions plugins to the project.

A node_modules directory should also appear in the project folder, which stores all node plugin files. All the necessary plugins are installed, you can proceed to the Gulp config settings.

Setting up gulpfile.js

gulpfile.js- this is the main configuration file of our task manager; this is where we will store all the settings and commands.

All Gulp work comes down to task ( English task). A task is a separate independent function with a name. Each task can be called separately.

Compatibility mode with modern standards

First, at the beginning of the file, let’s enable compatibility mode only according to modern standards:

"use strict";

You can learn more about this directive.

Initializing the plugin

Plugins are initialized with the following construct:

var initPlugin = require("plugin-name");

In accordance with this design, we initialize all our plugins:

Var gulp = require("gulp"), //main gulp plugin stylus = require("gulp-stylus"), //preprocessor stylus prefixer = require("gulp-autoprefixer"), //arrangement of autoprefixes cssmin = require(" gulp-minify-css"), //css minification uglify = require("gulp-uglify"), //js minification jshint = require("gulp-jshint"), //js error tracking rigger = require("gulp -rigger"), //working with includes in html and js imagemin = require("gulp-imagemin"), //minimizing images spritesmith = require("gulp.spritesmith"), //merging images into sprites rimraf = require( "rimraf"), //cleaning sourcemaps = require("gulp-sourcemaps"), //sourcemaps rename = require("gulp-rename"), //renaming files plumber = require("gulp-plumber"), // fuse to stop gulp watch = require("gulp-watch"), //expanding capabilities watch connect = require("gulp-connect"); //livereload

Path Constants

For convenience, let’s immediately define all paths and masks:

Var path = ( build: ( //Here we indicate where to put the files ready after assembly html: "build/", js: "build/js/", css: "build/css/", img: "build/css/ images/", fonts: "build/fonts/", htaccess: "build/", contentImg: "build/img/", sprites: "src/css/images/", spritesCss: "src/css/partial/" ), src: ( //Paths from where to get the sources html: "src/template/*.html", //The syntax src/template/*.html tells gulp that we want to take all files with the extension .html js: "src/ js/[^_]*.js",//In styles and scripts we only need main files jshint: "src/js/*.js", css: "src/css/styles.styl", cssVendor: "src /css/vendor/*.*", //If we want to store library files separately, then uncomment the img line: "src/css/images/**/*.*", //Syntax img/**/*.* means - take all files of all extensions from the folder and from subdirectories fonts: "src/fonts/**/*.*", contentImg: "src/img/**/*.*", sprites: "src/css/ sprites/*.png", htaccess: "src/.htaccess" ), watch: ( //Here we indicate which files we want to watch for changes html: "src/template/**/*.html", js: "src/js/**/*.js", css: "src/css/**/*.*", img: "src/css/images/**/*.*", contentImg: "src/ img/**/*.*", fonts: "src/fonts/**/*.*", htaccess: "src/.htaccess", sprites: "src/css/sprites/*.png" ), clean : "./build", //directories that can be cleaned outputDir: "./build" //initial root directory for starting the miniserver );

Please note that we can use name masks:

• *.js- all files with js extension
• [^_]*.js- all files with the js extension, excluding those that begin with an underscore
• *.* - any files with any extension within the current directory
• /**/*.html- all files with the extension .html within the current directory and all child directories

Task

Now that all the constants are written, you can start writing tasks. All tasks have the following structure:

Gulp.task("taskName", function())( //some functions ));

Mini-server and LiveReload

First of all, we will configure the local server and LiveReload:

// Local server for development gulp.task("connect", function())( connect.server(( //set up server configs root: , //root directory for running the server port: 9999, //which port we will use livereload: true //initialize the work LiveReload )); ));

Most likely, you will often have to work on several projects simultaneously. The server allows you to run many servers simultaneously; it is enough to register your own port for different projects.

Build HTML

// task for building html gulp.task("html:build", function () ( gulp.src(path.src.html) // Select files along the desired path.pipe(rigger()) // Run it through rigger . pipe(gulp.dest(path.build.html)) //upload them to the build folder .pipe(connect.reload()) //And reboot our server for updates ));

Build JS

// check js for errors and output them to the console gulp.task("jshint:build", function() ( return gulp.src(path.src.jshint) //select files along the desired path.pipe(jshint()) //run it through jshint .pipe(jshint.reporter("jshint-stylish")); //style error output to the console )); // JavaScript building gulp.task("js:build", function () ( gulp.src(path.src.js) // Find our main file.pipe(rigger()) // Run it through rigger .pipe(sourcemaps .init()) //Initialize sourcemap .pipe(uglify()) //Compress our js .pipe(sourcemaps.write()) //Write maps.pipe(rename((suffix: ".min"))) / /add the suffix.min to the output file.pipe(gulp.dest(path.build.js)) //upload the finished file to build .pipe(connect.reload()) //And reboot the server ));

Sprite build

All images to be combined into sprites are placed in the src/css/sprites/ directory and, after running through Gulp, they become a single sprite image. You should not put logos and backgrounds into sprites without clear dimensions.

// build sprites gulp.task("sprites:build", function () ( var spriteData = gulp.src(path.src.sprites) // choose where to get images to combine into a sprite.pipe(spritesmith(( imgName: " sprite.png", //name of the sprite image cssName: "sprite.styl", //name of the style where we store the positions of the images in the sprite imgPath: "images/sprite.png", //path where the sprite is cssFormat: "stylus", //format in which we process positions cssTemplate: "stylus.template.mustache", //mask file cssVarMap: function(sprite) ( sprite.name = "s-" + sprite.name //the name of each sprite will consist of the file name and the construction "s-" at the beginning of the name ) ))); spriteData.img.pipe(gulp.dest(path.build.sprites)); // path where we save the picture spriteData.css.pipe(gulp.dest(path .build.spritesCss)); // path where we save the styles ));

To display a sprite, just use a mixin. For example, for the file lorem.png, the selection from the sprite will look like this:

Lorem sprite($s-lorem)

Now the object with class .lorem will take the dimensions of the image and the image itself as the background.

Build static images

Static images are images used in a layout template.

// build static images gulp.task("image:build", function () ( gulp.src(path.src.img) //Select our images.pipe(imagemin(( //Compress them progressive: true, // compression.jpg svgoPlugins: [(removeViewBox: false)], //compression.svg interlaced: true, //compression.gif optimizationLevel: 3 //compression degree from 0 to 7 ))) .pipe(gulp.dest(path. build.img)) //upload to build .pipe(connect.reload()) //reboot the server ));

Build dynamic images

Dynamic images are content images that will change on the site and are included at the template level only for demonstration. For example, these could be images for news, etc.

// build dynamic images gulp.task("imagescontent:build", function() ( gulp.src(path.src.contentImg) .pipe(imagemin(( //Compress them progressive: true, //compression.jpg svgoPlugins: [(removeViewBox: false)], //compression.svg interlaced: true, //compression.gif optimizationLevel: 3 //compression degree from 0 to 7 ))) .pipe(gulp.dest(path.build.contentImg)) //upload to build .pipe(connect.reload()) //reboot the server ));

Build CSS

// building custom css gulp.task("cssOwn:build", function () ( gulp.src(path.src.css) //Select our main style file.pipe(sourcemaps.init()) //initialize soucemap . pipe(stylus(( compress: true, "include css": true ))) //Compile stylus .pipe(prefixer(( browser: ["last 3 version", "> 1%", "ie 8", "ie 7"] ))) //Add vendor prefixes.pipe(cssmin()) //Compress.pipe(sourcemaps.write()) //write sourcemap .pipe(rename((suffix: ".min"))) / /add the suffix.min to the name of the output file.pipe(gulp.dest(path.build.css)) //upload to build .pipe(connect.reload()) //reboot the server ));

Separate task for external styles:

// building vendor css gulp.task("cssVendor:build", function () ( gulp.src(path.src.cssVendor) // Take the vendor folder .pipe(sourcemaps.init()) //initialize soucemap .pipe( cssmin()) //Compress.pipe(sourcemaps.write()) //write sourcemap .pipe(gulp.dest(path.build.css)) //upload to build .pipe(connect.reload()) // reboot the server));

Let’s also add a task for building general CSS:

// build the entire css gulp.task("css:build", [ "cssOwn:build", // "cssVendor:build" ]);

In case you need to process external styles separately from home styles and unload them separate files you need to uncomment the line "cssVendor:build"

Font build

// build fonts gulp.task("fonts:build", function() ( gulp.src(path.src.fonts) .pipe(gulp.dest(path.build.fonts)) //upload to build ));

Build.htaccess

// build htaccess gulp.task("htaccess:build", function() ( gulp.src(path.src.htaccess).pipe(gulp.dest(path.build.htaccess)) //upload to build ));

General build

So that we don’t have to build each part separately, let’s write a task for the general build:

// build everything gulp.task("build", [ "html:build", "jshint:build", "js:build", "sprites:build", "css:build", "fonts:build", " htaccess:build", "image:build", "imagescontent:build" ]);

Cleaning up the build

Sometimes you need to completely clean out the build directory. Here the following task will come to our aid:

// clean the build folder gulp.task("clean", function (cb) ( rimraf(path.clean, cb); ));

Watch or track changes in real time

One of the most important and useful functions Gulp is a watch function that allows you to monitor in real time all changes to the files produced and, depending on this, perform specific actions:

// watch gulp.task("watch", function())( //build html in case of change watch(, function(event, cb) ( gulp.start("html:build"); )); //build sprites in case of change watch(, function(event, cb) ( gulp.start("sprites:build"); )); //build contextual images in case of change watch(, function(event, cb) ( gulp.start(" imagescontent:build"); )); //build css in case of change watch(, function(event, cb) ( gulp.start("css:build"); )); //check js in case of change watch(, ["jshint"]); //build js in case of change watch(, function(event, cb) ( gulp.start("js:build"); )); //build static images in case of change watch(, function (event, cb) ( gulp.start("image:build"); )); //build fonts in case of change watch(, function(event, cb) ( gulp.start("fonts:build"); )) ; //build htaccess in case of change watch(, function(event, cb) ( gulp.start("htaccess:build"); )); ));

Default actions

Default actions are what tasks the task manager will perform when you enter the gulp command into the console:

// default actions gulp.task("default", ["build", "watch", "connect"]);

In our case, as usual, we will build our project, enable watch mode and start the server.

Command Line Commands

All gulp commands for the command line consist of two parts: the gulp command itself and the name of the task separated by a space. Here is a list of commands applicable to our config:

• gulp - main command, starts the default task
• gulp build - build everything
• gulp watch - launch watch
• gulp clean - cleans the build directory
• gulp connect - start the server
• gulp html:build - HTML build
• gulp jshint:build - check JS for errors
• gulp js:build - JS build
• gulp sprites:build - sprite build
• gulp image:build - build static images
• gulp imagecontent:build - build dynamic images
• gulp cssOwn:build - custom CSS build
• gulp cssVendor:build - build external CSS
• gulp css:build - general CSS build
• gulp fonts:build - font build
• gulp htaccess:build - build.htaccess

On at this stage gulpfile.js configuration is complete.

Copy the starter package to the project

First, let's go through the console in the folder where we are developing, for example cd develop/example and copy everything from the starter package directory to our project cp -a ~/develop/start/. ~/develop/example/

This copying method is the most convenient, because... will accurately copy everything, including hidden files.gitignore, etc.

Conclusion

Using this guide, we have prepared a starter package for using Gulp in our Front-end development projects.

This package is also available on GitHub

Post Scriptum

This article is not final and will be updated depending on changes and improvements.

Greetings. If you are involved in frontend development, you may have noticed that you often have to perform the same tasks. It would be great to automate all this and reduce the amount of routine to a minimum. Task managers and project assemblers, such as Gulp and Grunt.

Gulp is a fork of the Grunt project. He took the best practices from his parent. The instruction code is written in JavaScript. It works several times faster than Grunt.

Gulp is truly powerful. It will make frontend development easier and faster. I will list the main tasks that the project assembler will help you solve.

• Creating a Web Server for Debugging
• Automatically reload pages when changes are made (LiveReload)
• Tracking changes in project files
• Using HTML, CSS, JS preprocessors
• Combining files and minifying them
• Automatic creation of vendor prefixes for browsers (Autoprefixer)
• Automation of file and directory management
• Launch and control external teams operating system
• Launching and controlling applications
• Image optimization (compression, resizing, etc.)
• Uploading a project to an external server using FTP, SFTP, Git, etc.
• Connecting and using additional plugins (today there are already 3570 of them; the solution can be
• find for almost all everyday routine tasks and more)
• Automation of manual labor

Installation

Gulp requires Node.js to run. You can download it on the official website. I advise you to install the LTS version software platform. After installing Node.js, you can proceed to installing Gulp. To do this, open the operating system console and run the following command:

We use the parameter -g which allows you to install Gulp globally in operating system, without reference to a specific project.

It is important that there are no Russian characters in the path to the installation directory. This may cause some gulp plugins to not work correctly.

Okay, it's time to create a project in which we will use Gulp. Go to the project directory and run the command:

This will run a script that will ask you some questions about the project. The result will be a configured file for npm package.json. This is the project manifest. It contains a list of packages that are used in the project and other information. At this stage I entered the following data, adapt it to your project.

name: (bybtc-landing) version: (1.0.0) description: Landing Page for byBTC entry point: (index.js) test command: git repository: https://github.com/Neuropassenger/bybtc-landing.git keywords: landing

If you want to skip a question, just press Enter. The default value will be used. Now we can install Gulp for our project. Run the command:

npm i --save-dev gulp

Gulp will be installed in the project directory, and the parameter –save-dev will add it to package.json dependency. This will allow another developer who opens your project to quickly deploy it on their machine (using the command npm i).

If everything went well, then a directory should appear in the project folder node_modules. It contains the installed package gulp and all the dependencies needed for it to work.

It's time to create basic structure project. I stick to the same directory names as many developers. I advise you to do this too, so that another person can quickly understand the structure of your project. However, no one forbids you to use the names you want.

Create two folders in the project root:

• /src/ – source project during development, this is where you will edit the files
• /dist/ – project files and folders after assembly, finished product

Catalog /dist/ will be filled in automatically when building the project. Let's get on with it for now /src/. Create the following folders inside:

• /css/ – for cascading style sheets
• /js/ – for JavaScript scripts
• /img/ – for images
• /fonts/ – for fonts
• /sass/ – for SASS preprocessor files (if you use SASS)
• /libs/ – for third-party libraries

If everything is ready, then it's time to move on to creating the file gulpfile.js in the root of the project, which will help you configure Gulp. This is where you can create Gulp instructions that will help automate some of the mundane tasks.

Gulp Instructions

Any instruction is created in gulpfile.js using the function gulp.task(). The first parameter is the name of the instruction. Then there is an array of the names of instructions that must be executed before the defined instruction is run. Last parameter is a function whose body defines what the instruction does.

gulp.task("instruction_name", ["instruction_executed_before_the_current", "another_instruction"], function() ( // Some actions ));

To call the instruction, use the following command in the console:

gulp command_name

Compiling SASS to CSS

Let's start with compiling SASS to CSS. Install the gulp-sass package:

npm i --save-dev gulp-sass

First you need to connect the packages you use to gulpfile.js. Let's do it:

var gulp = require("gulp"), sass = require("gulp-sass");

Now let's create a statement that will compile SASS to CSS:

gulp.task("sass", function() ( return gulp.src("src/sass/**/*.sass") .pipe(sass()) .pipe(gulp.dest("src/css") ); ));

In the first line of the instructions we indicate the source files for compilation. IN specific example all files with the extension will be taken .sass located inside the folder /src/sass/ and its subfolders. You can also select specific files. Here is a sample list of how you can set paths to source files.

• src/sass/main.sass – select the main.sass file
• src/sass/*.sass – selects all files with the sass extension
• src/sass/**/*.sass – selects all files with the sass extension in all subfolders in the sass folder
• !src/sass/main.sass – main.sass file exception
• [‘!src/sass/main.sass’, ‘src/sass/second.sass’] – exclusion of an array of files main.sass and second.sass
• src/sass/**/*.+(scss|sass) – select all scss and sass files in all subfolders in sass

Now create in the folder /src/sass/ file main.sass and define some styles in it:

body color: red font-size: 20px

Save the file. Now we can check how the compilation works. In the console we run the command:

Checking the catalog /src/css/. It should contain the newly compiled CSS file. Do you see? Great! Let's move on.

Automatic page refresh (LiveReload)

Let's move on to automating page updates when they change, i.e. let's set it up LiveReload. This is one of the most popular tasks facing. We will need the npm package Browsersync For automatic update browser. Let's install it:

npm i --save-dev browser-sync

Let's connect browser-sync package at the beginning gulpfile.js, as we did earlier with packages gulp And gulp-sass:

browserSync = require("browser-sync");

Let's create instructions for launching Browsersync:

gulp.task("browser-sync", function() ( browserSync(( server: ( baseDir: "src" ) )); ));

All we did was call Browsersync to start and specify the project directory with the source files. There are other settings for Browsersync. You can find out about them in the documentation.

Let's add one more pipe to instructions sass, which will be used to update styles when compiling CSS files. Specify the parameter stream: true. This will allow you to update the styles streaming, without completely reloading the page.

Pipe(browserSync.reload(( stream: true; )))

Then we will create an instruction that will monitor changes in files and reload the page if necessary.

gulp.task("watch", ["browser-sync"], function() ( gulp.watch("src/sass/**/*.sass", ["sass"]); gulp.watch("src /js/**/*.js", browserSync.reload); gulp.watch("src/**/*.html", browserSync.reload); ));

Let me explain. The instructions are executed before starting browser-sync, i.e. The web server starts to debug the project. After this the instruction itself is executed watch. To track changes in files we use gulp.watch().

Inside the anonymous function we execute 3 times gulp.watch with two parameters. The first parameter is the files that need to be monitored, the second is the actions that need to be performed when files change, i.e. follow instructions sass or refresh the page.

Pay attention to the first one gulp.watch. Instead of browserSync.reload we pass the instruction in the array sass, which must be executed if the files have been changed. In it, as you remember, we stream-update the styles on the page.

Minification and merging of files

Almost any project has to use third-party libraries. Their number can be from 5 to infinity. Accordingly, all of them must be included in the finished product. It would be nice to optimize this whole thing, namely:

• minify (compress) used libraries
• reduce the number of requests to the server by combining libraries into a single file

Let's add several libraries to the project source files. For this I use Bower, package for NPM. Install Bower:

Create a configuration file .bowerrc in the root of the project for Bower, where we tell it where to save the libraries:

("directory": "src/libs/" )

Let's install, for example, the library jQuery and slider slick:

bower i jquery slick-carousel

Now we can start concatenating and compressing libraries. For this we will use packages gulp-concat And gulp-uglifyjs regarding JavaScript files. Let's install them:

npm i --save-dev gulp-concat gulp-uglifyjs

Regarding CSS – package gulp-cssnano. Install:

npm i --save-dev gulp-cssnano

Minified files usually have the suffix .min. The package will help us add it gulp-rename. Install:

npm i --save-dev gulp-rename

Let's start by connecting the installed plugins to gulpfile.js:

concat = require("gulp-concat"), uglifyJs = require("gulp-uglifyjs"), cssNano = require("gulp-cssnano"), rename = require("gulp-rename");

JavaScript

Let's create an instruction that will allow us to compress and merge JavaScript files:

gulp.task("min-js", function() ( return gulp.src([ "src/libs/jquery/dist/jquery.min.js", "src/libs/slick-carousel/dist/slick.min .js" ]) .pipe(concat("libs.min.js")) .pipe(uglifyJs()) .pipe(gulp.dest("src/js")); ));

Inside an anonymous function statement min-js We first specify the paths to the JavaScript library files as an array. Then using concat we combine the libraries into a single file libs.min.js uglifyJs. And finally, save the result to a folder /src/js/.

The instructions can be checked using the command in the console:

In folder /src/js/ the file will appear libs.min.js, which combines and compresses the JavaScript library files used in the project.

CSS

Let's create it in the catalog /src/css/ file libs.sass. We will import CSS library files into it. For example, using Bower I downloaded the library Bootstrap:

bower i bootstrap

Let's open the file libs.sass and import the Bootstrap CSS file into it:

@import "src/libs/bootstrap/dist/css/bootstrap"

Thus, we will collect all the CSS library files in one place, namely in the file libs.sass using import. Now let's create a compression instruction:

gulp.task("min-css", ["sass"] , function() ( return gulp.src("src/css/libs.css") .pipe(cssNano()) .pipe(rename(( suffix: ".min" ))) .pipe(gulp.dest("src/css")); ));

Before compression we compile the CSS from SASS using the instruction sass, which we indicated in the array after the instruction name min-css.

In the first line we take a specific file, libs.css. Next, we compress it using cssNano. Then using rename add a suffix .min. We save the result in a folder /src/css/.

Checking the instructions:

If you did everything correctly, then in the folder /src/css/ two files should appear. libs.css And libs.min.css. Compare their sizes.

Automatically adding vendor prefixes (Autoprefixer)

When using new CSS features, it is necessary to place vendor prefixes for proper operation styles. Doing such things manually is a thankless task. So let's get Gulp to do it for us.

First let's install gulp-autoprefixer:

npm i --save-dev gulp-autoprefixer

Let's connect the installed package to gulpfile.js:

autoprefixer = require("gulp-autoprefixer");

Okay, now we can use autoprefixer in the instructions sass. Let's do it after the call .pipe(sass()), because vendor prefixes need to be placed after SASS is converted to CSS. Let's add a new one pipe:

Pipe(autoprefixer([ "last 10 versions" ], ( cascade: true )))

The first parameter autoprefixer we pass an array in which we indicate that we want to enable support for the latest 10 browser versions. The second parameter is the settings, where we indicate that we want to see beautiful code in the output, i.e. enable cascading.

We check by adding to main.sass new property flex. Run the instructions sass:

IN main.css vendor prefixes should appear. Very simple, everything works automatic mode. Amazing!

Final build of the project

The last thing I would like to touch on in this guide for Gulp beginners is the final build of the project. For this we need a folder /dist/, which we created at the very beginning. It must be cleaned before each assembly. For this we will use the NPM package del. Let's install it:

npm i --save-dev del

Let's connect the package del V gulpfile.js:

del = require("del");

Let's create instructions clean to clean up the directory / dist/ before assembly:

gulp.task("clean", function() ( return del.sync("dist"); ));

Now you can start directly assembling the project. Let's create instructions build:

gulp.task("build", ["clean", "min-css", "min-js"], function() ( var buildCss = gulp.src([ "src/css/libs.min.css", "src/css/main.css" ]).pipe(gulp.dest("dist/css")); var buildFonts = gulp.src("src/fonts/**/*") .pipe(gulp.dest ("dist/fonts")); var buildJs = gulp.src("src/js/**/*") .pipe(gulp.dest("dist/js")); var buildHtml = gulp.src(" src/*.html") .pipe(gulp.dest("dist")); ));

Before calling instructions build we are clearing the folder /dist/ in case the assembly has already been carried out before. Then we compress and merge JavaScript and CSS files using the instructions min-js And min-css respectively. At the same time, we compile SASS to CSS, because before following instructions min-css instruction is executed sass.

Inside the body of the instruction, we copy the prepared project files to the directory with the finished product /dist/. Let's check the instructions:

Everything works great! In folder /dist/ Now there is a finished product after assembly, which can be uploaded to the production server.

Conclusion

This concludes the guide for beginners on assembling projects in Gulp. As you can see, everything is quite simple. Over time I will publish a few more posts regarding Gulp and its plugins, once I have a good understanding of them myself. In the meantime, use and automate your routine tasks in frontend development according to the instructions provided. If you have any questions, ask them in the comments to the post.

( "name": "bybtc-landing", "version": "1.0.0", "description": "Landing Page for byBTC", "main": "index.js", "scripts": ( "test" : "echo \"Error: no test specified\" && exit 1" ), "repository": ( "type": "git", "url": "git+https://github.com/Neuropassenger/bybtc- landing.git" ), "keywords": [ "landing" ], "author": "Oleg Sokolov", "license": "ISC", "bugs": ( "url": "https://github.com /Neuropassenger/bybtc-landing/issues" ), "homepage": "https://github.com/Neuropassenger/bybtc-landing#readme", "devDependencies": ( "browser-sync": "^2.18.13" , "del": "^3.0.0", "gulp": "^3.9.1", "gulp-autoprefixer": "^4.0.0", "gulp-concat": "^2.6.1", " gulp-cssnano": "^2.1.2", "gulp-rename": "^1.2.2", "gulp-sass": "^3.1.0", "gulp-uglifyjs": "^0.6.2" ) )

var gulp = require("gulp"), sass = require("gulp-sass"), browserSync = require("browser-sync"), concat = require("gulp-concat"), uglifyJs = require("gulp- uglifyjs"), cssNano = require("gulp-cssnano"), rename = require("gulp-rename"), autoprefixer = require("gulp-autoprefixer"), del = require("del"); gulp.task("sass", function() ( return gulp.src("src/sass/**/*.sass") .pipe(sass()) .pipe(autoprefixer([ "last 10 versions" ], ( cascade: true ))) .pipe(gulp.dest("src/css")) .pipe(browserSync.reload(( stream: true ))); )); gulp.task("min-css", ["sass"] , function() ( return gulp.src("src/css/libs.css") .pipe(cssNano()) .pipe(rename(( suffix: ".min" ))) .pipe(gulp.dest("src/css")); )); gulp.task("min-js", function() ( return gulp.src([ "src/libs/jquery/dist/jquery.min.js", "src/libs/slick-carousel/dist/slick.min .js" ]) .pipe(concat("libs.min.js")) .pipe(uglifyJs()) .pipe(gulp.dest("src/js")); )); gulp.task("browser-sync", function() ( browserSync(( server: ( baseDir: "src" ) )); )); gulp.task("watch", ["browser-sync"], function() ( gulp.watch("src/sass/**/*.sass", ["sass"]); gulp.watch("src /js/**/*.js", browserSync.reload); gulp.watch("src/**/*.html", browserSync.reload); )); gulp.task("clean", function() ( return del.sync("dist"); )); gulp.task("build", ["clean", "min-css", "min-js"], function() ( var buildCss = gulp.src([ "src/css/libs.min.css", "src/css/main.css" ]).pipe(gulp.dest("dist/css")); var buildFonts = gulp.src("src/fonts/**/*") .pipe(gulp.dest ("dist/fonts")); var buildJs = gulp.src("src/js/**/*") .pipe(gulp.dest("dist/js")); var buildHtml = gulp.src(" src/*.html") .pipe(gulp.dest("dist")); ));