Gulp de description in Russian. Installing and Using Gulp

Installing Gulp is pretty straightforward. First, install the Gulp package globally:

npm install -g gulp

Then install it in your project:

npm install --save-dev gulp

Using Gulp

Let's create a Gulp task to minify one of our JavaScript files. Create a file named gulpfile.js. It will define your tasks that are run with the gulp command.

Add the following commands to your gulpfile.js file:

Var gulp = require("gulp"), uglify = require("gulp-uglify"); gulp.task("minify", function () ( gulp.src("js/app.js") .pipe(uglify()) .pipe(gulp.dest("build")) ));

Install gulp-uglify via npm by running npm install --save-dev gulp-uglify and then run the task via gulp minify . Let's say you have a file called app.js in the js folder, a new app.js will be created in the build folder and contain a compressed version of js/app.js.

What is really going on here?

We do a few things in our gulpfile.js file. First, we load the gulp and gulp-uglify modules:

Var gulp = require("gulp"), uglify = require("gulp-uglify");

We then define a task named minify that, when run, calls the function given as the second argument:

Gulp.task("minify", function () ( ));

Finally, and this is the hardest part, we define what our task should do:

Gulp.src("js/app.js") .pipe(uglify()) .pipe(gulp.dest("build"))

If you are not familiar with threads, and most front-end developers are not, then the code above will not tell you anything.

streams

Streams allow some data to pass through a series of usually small functions that modify the data and then pass it on to the next function.

In the example above, the gulp.src() function takes a string that corresponds to a file or set of files and creates a stream of objects representing those files. They then pass (or flow) into the uglify() function, which takes in file objects and returns new file objects with minified source. This result then flows into the gulp.dest() function, which saves the modified files.

Here is what happens in diagram form:

When there is only one task, the function does nothing. However, consider the following code:

Gulp.task("js", function () ( return gulp.src("js/*.js") .pipe(jshint()) .pipe(jshint.reporter("default")) .pipe(uglify() ) .pipe(concat("app.js")) .pipe(gulp.dest("build")); ));

To run this yourself, install gulp, gulp-jshint, gulp-uglify and gulp-concat.

This task takes all files matching js/*.js (in other words, all JavaScript files from the js folder), runs JSHint on them, outputs a report, minifies each file, and then concatenates them, saving them in build/app.js. In diagram form:

If you're familiar with Grunt, you'll notice that this is quite different from how Grunt works. Grunt does not use threads. Instead, it takes files, runs one task per file, and saves to new files, repeating the entire process for each task. As a result of many filesystem accesses, Grunt is slower than Gulp.

For a better understanding of streams, read the Stream Handbook.

gulp.src()

The gulp.src() function takes one or more files or an array and returns a stream that can be passed to plugins.

The other two plugins are clearer: the uglify() function minifies the code, and the concat("app.js") function concatenates all files into one named app.js.

gulp-load-plugin

A module I find quite useful is called gulp-load-plugins, which automatically loads any Gulp plugins from the package.json file and attaches them to the object. The main application is as follows:

Var gulpLoadPlugins = require("gulp-load-plugins"), plugins = gulpLoadPlugins();

You can write everything in one line ( var plugins = require("gulp-load-plugins")();), but I'm not a big fan of the single line require.

After running this code, the plugins object will contain your plugins with CamelCase-style names (for example, gulp-ruby-sass will be loaded as plugins.rubySass ). You can use them in the normal way. For example, our js task would be shortened like this:

Var gulp = require("gulp"), gulpLoadPlugins = require("gulp-load-plugins"), plugins = gulpLoadPlugins(); gulp.task("js", function () ( return gulp.src("js/*.js") .pipe(plugins.jshint()) .pipe(plugins.jshint.reporter("default")) .pipe (plugins.uglify()) .pipe(plugins.concat("app.js")) .pipe(gulp.dest("build")); ));

Attached is a package.json file that contains something similar to:

( "devDependencies": ( "gulp-concat": "~2.2.0", "gulp-uglify": "~0.2.1", "gulp-jshint": "~1.5.1", "gulp": " ~3.5.6" ) )

This example is actually not much shorter. However, for large and complex Gulp files, this will reduce the file upload block to one or two lines.

Version 0.4.0 of gulp-load-plugins released in early March added lazy loading of the plugin which improves performance. Plugins are not loaded until they are called, which means you don't have to worry about unused plugins in package.json affecting performance (although they should probably be removed anyway). In other words, if you run a task that only requires two plugins, it won't load all the plugins that other tasks require.

File Tracking

Gulp has the ability to watch files for changes and execute a task or tasks when changes are detected. This feature is amazingly useful (probably one of the most useful in Gulp for me). You can save the Less file and Gulp will turn it into CSS and update the browser without any action on your part.

To watch a file or files, use the gulp.watch() function, which takes a pattern of files, or an array of them (such as gulp.src() ), or an array of tasks to run them or execute a callback function.

Let's say we have a build task that turns our template files into HTML, and we want to define a watch task that watches for template changes and runs a task to convert them to HTML. We can use the watch function like this:

Gulp.task("watch", function () ( gulp.watch("templates/*.tmpl.html", ["build"]); ));

Now, when the template file is changed, the build task will be run, which will generate the HTML.

You can also give watch a callback instead of an array of tasks. In this case, the function receives an event object containing information about the event that called the function:

Gulp.watch("templates/*.tmpl.html", function (event) ( console.log("Event type: " + event.type); // added, changed, or removed console.log("Event path: " + event.path); // file path ));

Another distinctive feature gulp.watch() is that it returns a watcher . Use it to listen for additional events, or to add files to watch. For example, to run a list of tasks and call a function at the same time, you can add a listener to the change event when watcher returns:

Var watcher = gulp.watch("templates/*.tmpl.html", ["build"]); watcher.on("change", function (event) ( console.log("Event type: " + event.type); // added, changed, or removed console.log("Event path: " + event.path); // the path to the file ));

In addition to the change event, you can listen to a number of other events:

  • end
    Fires when the watcher ends (meaning that tasks and callbacks will no longer be called when files change).
  • error
    Fires when an error occurs.
  • ready
    Fires when files have been found and are ready to be tracked.
  • nomatch
    Fires when no files match the request.

The watcher object also contains some methods that can be called:

  • watcher.end()
    Stops the watcher (no more tasks or callbacks will be called).
  • watcher.files()
    Returns a list of files watched by watcher .
  • watcher.add(glob)
    Adds files to watcher that match the specified glob pattern (also accepts an optional callback function as second argument).
  • watcher.remove(filepath)
    Removes the specified file from watcher .

Hello everyone. If you are in any way connected with JS, you have probably heard of such an application as gulp . And maybe even used. From my own experience, I can say that it can be difficult to “get into” how to work with him, although the key to understanding lies on the surface. Therefore, I am publishing this material, hoping that it will become useful.

Also, based on this material, a video was shot, so you can choose in what form to consume.


If you compare gulp with other popular build systems, then it’s like comparing a finished quadcopter in the “buy and fly” type, and a kit for self assembly drone. Yes, you will take off only the next day, but you have more flexibility and control in your hands, especially if you have a non-standard task.

In fact, after overcoming the entry threshold, gulp does not look so complicated, and at times even understandable and logical. But, without proper preparation, it can be difficult to come to such a state. Let's dive into it and see what principles gulp is built on.

Let's go from afar. In the nodejs ecosystem, there is such a thing as streams, or stream. Due to the complexity of translation, threads are also called threads of a multi-threaded program. In our case, a stream is an object representing streaming data, and is a completely different concept.

So these streams offer user-friendly interface for asynchronous work with data. The entire process of reading / writing is handled by the node engine, and we only have the corresponding callbacks when a new piece of data appeared, when an error occurred, when the stream ended, etc. In this way, I/O efficiency is achieved with minimal effort on the part of the programmer.

Const fs = require("fs"); const input = fs.createReadStream("myfile"); input.on("data", (chunk) => ( console.log(chunk); )); input.on("end", () => ( console.log("file is read"); ));
Streams in nodejs can be almost anything, from files or strings to sockets. For example, in the famous Express framework, HTTP request and the response are nothing but streams. Streams can be read-only, write-only, or both.

Streams have one useful feature: they can be stacked together in a chain called a pipe. Thus, we can combine several threads with each other, and manage them as one. The output of one stream feeds into the next, and so on until the end. As you can guess from the translation of the word pipe, this is very similar to a pipeline.

This allows you to determine the desired data flow (again, the complexity of the translation. Here we mean flow, or flow) right here and now without waiting for the data to become available.

For example, this is how we can determine what we want to give as a result, and the engine itself is already engaged in “how” to give.

Const fs = require("fs"); const express = require("express"); var app = express(); app.get("/", function (req, res) ( fs.createReadStream("myfile") .pipe(res); )); app.listen(3000);
Note that the request handler completes before the file is even opened - the node engine takes care of the rest.

Gulp is built on a similar approach. This is its advantage, but it is also its disadvantage. A drawback, at least, can be called due to the resulting confusion, since gulp uses other, similar, but incompatible streams. Gulp works closely with file system, which is why it uses streams, which represent not so much a stream of data as individual virtual files, each with its own content.

If you've ever heard of vinyl, this is exactly the implementation of streams that gulp uses. If we take a standard task for a gallp and look at what is inside, we will find that for each call to the data event, a file object comes to us, which contains all the necessary information: file name, file path, working directory and, of course, its content.

Const gulp = require("gulp"); gulp.task("default", function() ( gulp.src("./*.js") .on("data", function(file) ( console.log("data callback"); console.log( file.inspect()); /* It outputs: * data callback * > * data callback * > */ )) .pipe(gulp.dest("dist/")); ));
The content can be presented in two formats: as an already read buffer, or as a native node stream. Each stage of the Galpov pipe takes such files as input, makes some kind of transformation and transfers it to the output of the next chain. The last chain usually just saves them to disk.

Pipe(gulp.dest("dist/"));
Realizing that the threads in gulp are different leads to enlightenment and understanding as it explains most of the problems and bugs.

Consider real example. You want to use browserify to splice together your JS files. You go and find the gulp-browserify plugin. But you see a postscript that says that the plugin is deprecated, i.e. Deprecated.

As a well-educated programmer, you dismiss this option and go looking for what solution is not outdated. Find the official gulp recipes and see that browserify works with gulp directly. Well, as directly, through an interlayer, which just translates the native node stream into a vinyl stream that gulp understands. Without it, nothing would work, because these are different threads.

If you want to write your own transformation, you can use this template.
As you can see, everything is simple here: our handler will be called for each file, which will perform the modifications. We can do whatever we want: change the contents of the file, rename the file, delete the file, or add a couple more new files to the stream.

As we remember, the contents of a file in a vinyl stream can be represented as a buffer or as a data stream. However, it is not necessary to support both. You can always use the package

Hello everyone! In this article, we will create our project, initialize the manifest file, and install gulp locally.

To begin with, it should be said that the path to the folder (including the username of the computer) must be on English language, otherwise you might get errors when using gulp. I created a folder Projects, in which I will create all my projects. For example, I will name our project firstProject.

So, in the last article we set gulp globally, now we need to install it locally. First of all, we will carry out initialization. Write the following command in the terminal:

cd path_to_your_project (cd "user/projects/firstProject")
npm init

With this command, we will create a basic manifest file for our project. In principle, everything is clear there, so I will not explain. If you do not want to bother with all these settings, then just press all the time enter, because we need this file for another, initial settings not so important.

If you did everything correctly, then a file should appear in your project folder package.json. If you open it, you will see that all the information that you entered (or did not enter) during initialization is stored there. In addition, the file stores information about the packages used, and this is exactly what we need. If you constantly use, for example, the library jQuery, then you can write it to this file, and it will be automatically downloaded when starting a new project.

Now let's install gulp locally to our folder.

npm i gulp --save-dev

Flag --save-dev needed in order for the package gulp and its version are automatically written to the file package.json. If you open this file after successfully installing the package, you will see that the following appears there:

"devDependencies" :(
"gulp": "^3.9.1"
}

I think it's clear that the name of the package and its version are written here. An up arrow indicates that this package is upgradable. We also have a folder node_modules where is now stored gulp and all its dependencies. This is where new modules will be installed.

So, that's all for today. We have considered how to install gulp locally to the project folder and why you need a manifest package.json.

To speed up the front-end development process, we automate some tasks using the Gulp faucet.
To do this, we need the NPM package manager. But in order to install NPM, you first need to install Node.js.

Step 1Install Node
We go to the official site https://nodejs.org and download the recommended version.

Run the installer with administrator rights.
After installation, 2 icons will appear: Node.js and Node.js coomand prompt. They will not be useful to us, since we do not use Node.js, and there are more convenient options for launching the console:
1. Use Command Console TotalCommander (Commands - Open command console).
2. Hold Shift and right-click to open context menu. It will display the item "Open command window".
It is better to launch the command line from the directory of the project you need, the console will immediately display the path to the desired directory, this will eliminate the need to enter the path manually.

To check node and npm versions, type
node -v and press Enter
then npm -v

NPM versions are usually updated more frequently than node versions to install the latest version:
npm install [email protected]-g

npm commands we need :
npm list- list of all installed packages
npm -g ls --depth=0- list of globally installed packages
npm published check if packages are out of date
npm update gulp- updating plugin versions
npm init- create package.json
npm install package_name- install the package (package_name - the name of the required package)
npm install package_name --save-dev- install the package and make an entry about it in package.json in the devDependencies section
npm uninstall package_name- package removal
npm install- install all packages listed in package.json
Before going into production npm shrinkwrap- fix the package versions, now npm install will install them and you will be sure that everything will work as it should

Abbreviations
-v: --version
-g: --global
-S: --save
-D: --save-dev
-y: --yes
-n: --yes false

Step 2Installing gulp
First gulp needs to be installed globally.

We start the command console.
Sometimes on some resources there is a dollar sign in front of the command, for example
$ npm install --global gulp-cli

Do not copy the dollar sign, paste only the command itself
npm install --global gulp-cli

Clue: to paste the copied text into command line, open the command line, press ALT + SPACE -> Default values, check the box Select with mouse. Now you can select the text with the mouse, copy, in com. right-click on the line - the text will be inserted automatically.

Step 3. Working with gulp in a specific project

3.1 First, let's create a dependency package package.json
The package.json file contains information that we will enter in the terminal and a list of all packages that we use in the project.

When installing a package with the --save-dev key, the package is automatically added to package.json. In order not to install all the packages manually in each new project, we will use the ready-made package.json with the modules and dependencies we need, placing it in the root of our project.

package.json is generated using the npm init command, which will print a few questions to the console to create the file.
The name item displays the name of your project directory by default.

Clue:
You can generate this file faster and easier by using the --yes option (automatically answer yes to all questions):
npm init --yes

Good to know:
You can set default values ​​that will be used every time you run npm init, which will save you time. Once installed, they are stored in .npmrc files.
For instance:
npm config set init.author.name "Valentina Vladova"
npm config set init.author.email" [email protected]"
npm config set init.author.url "http://simpalmarket.com/"
npm set init-license MIT
npm set init-version 0.0.0
Then run npm init, all the specified values ​​will be pulled into the corresponding variables.

When npm init asks for a git repo, write briefly user/repo - npm is smart enough to expand the line at https://github.com/user/repo. npm will also generate the repository, bugs, and homepage fields in the correct format.

So, go to the root folder of the project, call the command console and type
npm init --yes

A package.json file will appear at the root of the project with something like this

3.2 Install gulp locally
In the project folder in the console enter:
npm install --save-dev gulp

or abbreviated
npm i gulp --save-dev

The list will be Warn - ignore.

To check the version, use the command
gulp --version

The node_modules folder appeared in the root directory of the project. All modules and dependencies that we will install in the project will automatically be loaded into it. There can be a lot of folders with dependencies, even if there are not so many packages themselves installed. This is due to the fact that in addition to the main packages, the programs necessary for the correct operation of the main package are installed. You don't need to clean or delete anything from the node_modules folder.

An entry will be added to the package.json file
"devDependencies" :(
"gulp": "^3.9.1"
}

Now you can install various plugins for gulp.
http://gulpjs.com/plugins/
In the search field, enter the name of the plugin you are interested in.

Plugins can be installed one at a time, for example:
npm install --save-dev gulp-plumber
as well as a list separated by a space, for example:
npm install gulp-sass gulp-plumber gulp-autoprefixer gulp-minify-css --save-dev
Plugins for installation and plugins for assembly are best installed with separate commands

npm init

You will need:

  • Specify project name
  • Project version
  • Project description
  • entry point
  • team
  • Git repository
  • Keywords
  • Author's name
  • License

npm i –g gulp

  • Task name

gulp test

The task is working.

gulp serve

npm i gulp-sass --save-dev

  1. Compiling sass to css
  2. Adding prefixes
  3. Saving a file in src/css

Creating a task in gulp

Conclusion.

https://gulpjs.com/plugins/

Open the terminal and go to the folder with the project. The first thing we need to do is initialize npm to do this, run the command:

npm init

You will need:

  • Specify project name
  • Project version
  • Project description
  • entry point
  • team
  • Git repository
  • Keywords
  • Author's name
  • License

Everything can be left by default (if you do not want to upload the project to general access)

Then we confirm the entered information.

Fine. NPM initialized. Now the packages.json file has appeared in the root - the configuration file of the package manager.

Now we can install gulp. First you need to install it globally, and then for the project. To install globally, run the following command:

npm i –g gulp

Now let's install gulp for the project:

npm install --save-dev gulp

All gulp for the project is installed.

Let's check. Let's create a gulpfile.js file and create one test task in it, which will display "I'm working" in the console.

var gulp = require("gulp"); gulp.task("test", function() ( console.log("I'm working"); ));

First, we include gulp, and second, we call gulp's task function, which takes two parameters:

Now in the console run the following command

gulp test

The task is working.

Now let's install and enable packages that help with layout.

Browsersync, a package that allows you to automatically update the page when files change

To install in the console, run the following command:

npm i browser-sync --save-dev

Now let's create a task that will run browser-sync and watch for file changes.

Gulp.task("serve", ["sass"], function() ( browserSync.init(( server: "src/" )); gulp.watch("src/css/*.css")on("change ", browserSync.reload); gulp.watch("src/*.html").on("change", browserSync.reload); ));

The task is called serve. And browser-sync will update the browser page automatically if the css files (located in the src/css folder) and html files (located in the src folder) have changed.

To start this task, run the command

gulp serve

I use sass for layout. Therefore, to compile from sass to css, I use the gulp-sass package.

Installing and configuring gulp-sass

To install gulp-sass in the console, run the command:

npm i gulp-sass --save-dev

Now let's create a sass task that will compile sass to css. And change the serve task so that our browser-sync listens instead of css file sass.

var gulp = require("gulp"); var browserSync = require("browser-sync").create(); var sass = require("gulp-sass"); gulp.task("serve", ["sass"], function() ( browserSync.init(( server: "src/" )); gulp.watch("src/sass/*.sass", ["sass" ]); gulp.watch("src/*.html").on("change", browserSync.reload); )); gulp.task("sass", function() ( return gulp.src("src/sass/*.sass") .pipe(sass().on("error", sass.logError)) .pipe(gulp. dest("src/css")) .pipe(browserSync.stream()); ));

Now when you run the serve task, the sass task will run.

Installing and configuring gulp-autoprefixer

To install gulp-autoprefixer, run the command:

npm i gulp-autoprefixer --save-dev

And add a prefix to the sass task.

var gulp = require("gulp"); var browserSync = require("browser-sync").create(); var sass = require("gulp-sass"); var autoprefixer = require("gulp-autoprefixer"); gulp.task("serve", ["sass"], function() ( browserSync.init(( server: "src/" )); gulp.watch("src/sass/*.sass", ["sass" ]); gulp.watch("src/*.html").on("change", browserSync.reload); )); gulp.task("sass", function() ( return gulp.src("src/sass/*.sass") .pipe(sass().on("error", sass.logError)) .pipe(autoprefixer( ( browsers: ["last 2 versions"], cascade: false ))) .pipe(gulp.dest("src/css")) .pipe(browserSync.stream()); ));

Now, when running the sass task, the c will have:

  1. Compiling sass to css
  2. Adding prefixes
  3. Saving a file in src/css

The following package combines all css files into one.

Installing and configuring contactCss

To install contactCss use the following command:

npm i gulp-concat-css --save-dev

And add the execution of this package to the sass task. (We will combine all css files in style.css)

var gulp = require("gulp"); var browserSync = require("browser-sync").create(); var sass = require("gulp-sass"); var autoprefixer = require("gulp-autoprefixer"); var concatCss = require("gulp-concat-css"); gulp.task("serve", ["sass"], function() ( browserSync.init(( server: "src/" )); gulp.watch("src/sass/*.sass", ["sass" ]); gulp.watch("src/*.html").on("change", browserSync.reload); )); gulp.task("sass", function() ( return gulp.src("src/sass/*.sass") .pipe(sass().on("error", sass.logError)) .pipe(autoprefixer( ( browsers: ["last 2 versions"], cascade: false ))) .pipe(concatCss("style.css")) .pipe(gulp.dest("src/css")) .pipe(browserSync.stream( )); ));

Fine. Now let's add a package that renames files. (We will need it, the code we will minimize css and js files)

Installing and configuring gulp-rename

To install gulp-rename, run the following command:

npm i gulp-rename --save-dev

For now, we will not add this package to any tasks.

Installing and configuring a package to minify CSS files - clean-css

To install clean-css, run the following command:

npm i gulp-clean-css --save-dev

Now let's create a mincss task that will add the ".min" suffix to the filename, minify the css file and save it to app/css

var gulp = require("gulp"); var browserSync = require("browser-sync").create(); var sass = require("gulp-sass"); var autoprefixer = require("gulp-autoprefixer"); var concatCss = require("gulp-concat-css"); var cleanCSS = require("gulp-clean-css"); var rename = require("gulp-rename"); gulp.task("serve", ["sass"], function() ( browserSync.init(( server: "src/" )); gulp.watch("src/sass/*.sass", ["sass" ]); gulp.watch("src/*.html").on("change", browserSync.reload); )); gulp.task("sass", function() ( return gulp.src("src/sass/*.sass") .pipe(sass().on("error", sass.logError)) .pipe(autoprefixer( ( browsers: ["last 2 versions"], cascade: false ))) .pipe(concatCss("style.css")) .pipe(gulp.dest("src/css")) .pipe(browserSync.stream( )); )); gulp.task("mincss", function() ( return gulp.src("src/css/*.css") .pipe(rename((suffix: ".min"))) .pipe(cleanCSS()) . pipe(gulp.dest("app/css")); ))

Great, let's install the gulp package, which will minify js files.

Installing and configuring the gulp package to minify js files --gulp-uglify

To install gulp-uglify, run the following command:

npm i gulp-uglify --save-dev

Now let's create a task that will add the ".min" suffix to the file, minify the js file and save it to app/js

var gulp = require("gulp"); var browserSync = require("browser-sync").create(); var sass = require("gulp-sass"); var autoprefixer = require("gulp-autoprefixer"); var concatCss = require("gulp-concat-css"); var cleanCSS = require("gulp-clean-css"); var rename = require("gulp-rename"); var uglify = require("gulp-uglify"); gulp.task("serve", ["sass"], function() ( browserSync.init(( server: "src/" )); gulp.watch("src/sass/*.sass", ["sass" ]); gulp.watch("src/*.html").on("change", browserSync.reload); )); gulp.task("sass", function() ( return gulp.src("src/sass/*.sass") .pipe(sass().on("error", sass.logError)) .pipe(autoprefixer( ( browsers: ["last 2 versions"], cascade: false ))) .pipe(concatCss("style.css")) .pipe(gulp.dest("src/css")) .pipe(browserSync.stream( )); )); gulp.task("mincss", function() ( return gulp.src("src/css/*.css") .pipe(rename((suffix: ".min"))) .pipe(cleanCSS()) . pipe(gulp.dest("app/css")); )) gulp.task("minjs", function() ( return gulp.src("src/js/*.js") .pipe(rename((suffix : ".min"))) .pipe(uglify()) .pipe(gulp.dest("app/js")); ))

We have created the main tasks. But the last two must be performed when putting the project into production. And they must be done together. Let's create a task that will execute the mincss task and then minjs

Creating a task in gulp

Let's create a min task that will run the mincss and minjs tasks

var gulp = require("gulp"); var browserSync = require("browser-sync").create(); var sass = require("gulp-sass"); var autoprefixer = require("gulp-autoprefixer"); var concatCss = require("gulp-concat-css"); var cleanCSS = require("gulp-clean-css"); var rename = require("gulp-rename"); var uglify = require("gulp-uglify"); gulp.task("serve", ["sass"], function() ( browserSync.init(( server: "src/" )); gulp.watch("src/sass/*.sass", ["sass" ]); gulp.watch("src/*.html").on("change", browserSync.reload); )); gulp.task("sass", function() ( return gulp.src("src/sass/*.sass") .pipe(sass().on("error", sass.logError)) .pipe(autoprefixer( ( browsers: ["last 2 versions"], cascade: false ))) .pipe(concatCss("style.css")) .pipe(gulp.dest("src/css")) .pipe(browserSync.stream( )); )); gulp.task("mincss", function() ( return gulp.src("src/css/*.css") .pipe(rename((suffix: ".min"))) .pipe(cleanCSS()) . pipe(gulp.dest("app/css")); )) gulp.task("minjs", function() ( return gulp.src("src/js/*.js") .pipe(rename((suffix : ".min"))) .pipe(uglify()) .pipe(gulp.dest("app/js")); )) gulp.task("min",["mincss", "minjs"]) ;

Everything. Let's also set a default task.

Setting gulp default task

gulp.task("default", ["serve"]);

Conclusion.

We have considered what gulp is for, how to install it. Installed additional packages, which are necessary for layout and set tasks.

You can find the necessary packages yourself at https://gulpjs.com/plugins/ and install them. And then create tasks to optimize the development process.

RELATED ARTICLES