There are many tutorials on Gulp that are similar to each other. This paper mainly combs and guides them on the content.

What is Gulp?

Optimizing your site’s resources and testing them with different browsers isn’t the most fun part of the website design process, but many of the repetitive tasks can be automated with the right tools, which can be much more efficient, and that’s what makes it interesting for many developers.

Gulp is a build system that improves the website development process by automating common tasks such as compiling and preprocessing CSS, compressing JavaScript, and refreshing the browser. Gulp is built on Node.js, so both the Gulp source file and the Gulp file you use to define tasks are written into JavaScript (or CoffeeScript). Front-end developers can also write tasks in languages they are familiar with to lint JavaScript and CSS, parse templates, and compile LESS files when files change (these are just a few examples, of course).

Building With Gulp – SMASHING MAGAZINE

Gulp vs Grunt

The characteristics of the Grunt

  • Grunt has a well-developed community of plugins

  • It’s easy to learn and you can install and configure any plugins you like

  • You don’t need any advanced ideas, and you don’t need any experience

Similarities and Differences between Gulp and Grunt

  • Easy to use: With a code over configuration strategy, Gulp keeps simple things simple and complex tasks manageable

  • Efficient: By taking advantage of Node.js’ powerful streams and eliminating the need to write intermediate files to disk, builds can be done faster

  • High Quality: Gulp’s strict plug-in guidelines ensure that plug-ins are simple and work the way you expect

  • Easy to learn: By keeping the API to a minimum, you can learn Gulp in a short time, and the build works just as you’d expect it to: a series of stream pipes.

Gulp vs Grunt – benben

Grunt regression of

  • It is difficult for plug-ins to comply with the Single Responsibility Principle

  • Use plug-ins to do things you don’t need plug-ins to do

  • Trying to do everything with configuration files results in chaos

  • Poor process control results in performance delays caused by headache temporary files/folders

The path to Gulp

  • With Gulp, your build script is code, not a configuration file

  • Use the Node.js Standard Library to write scripts

  • Plugins are very simple and only do one thing (usually 20 lines or so)

  • Input/output (I/O) is based on “streaming”

“Streaming” front-end build tool — Introduction to gulp.js — SegmentFault

Getting Started

Step 1: Install Node

Node. Js’s official website

]

Step 2: Use the command line

To ensure that Node is installed correctly, verify this by looking at the version number, as shown below.

node -v
npm -v

Step 3: Locate the project

Linux, OSX Terminal (Terminal)

CD to the directory ls to get a list of files

Command Prompt in Windows is located in a directory

D: CD, CD, CD, CD, CD, CD, CD, CD, CD Go back to the previous directory

Note: You need to use quotation marks when entering a directory containing special characters. For example: CD “C: Program Files”.

Get a list of files

dir /b

After successfully entering the project directory, we start to install Gulp.

Step 4: Install Gulp

NPM is a command-line based Node package manager that installs Node program modules into a project. You can view and search for all available program modules on its website.

Type it on the command line

sudo npm install -g gulp

Description:

  1. Sudo is an administrator to execute a command that typically requires a computer password

  2. NPM is the tool that installs the Node module and executes the install command

  3. -G means install in the global environment so that any project can use it

  4. Finally, gulp is the name of the Node module to be installed

At run time, check the command line for error messages. After the installation is complete, you can use the following command to check the version number of gulp to ensure that gulp has been installed correctly.

gulp -v

Next, we need to install gulp locally to the project

npm install --save-dev gulp

Description:

  1. Update package.json file with –save-dev and update devDependencies value to indicate that the project depends on gulp.

  2. Dependencies indicate to other project participants the node module dependencies of a project in both development and production environments. For more information, check out the package.json documentation.

The front-end build tool gulp – SegmentFault

Step 5: Create a new Gulpfile and run Gulp

Once gulp is installed we need to tell it what tasks to perform for us. So first we need to figure out what tasks the project requires. Such as:

  • Check JavaScript (gulp-jshint)

  • Merge JavaScript (gulp – concat)

  • Compress and rename merged JavaScript(gulp-ugligy, gulp-rename)

1. Install dependencies

According to the task requirements above, we install the corresponding plug-in.

npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename --save-dev

The official Plugin library

2. Create gulpfile

Once the plugin is installed, we need to create a new gulpfile.js file to specify what gulp needs to do for us.

3. Introduce plug-ins

Var gulp = require('gulp'); Var jshint = require('gulp-jshint'); var jshint = require('gulp-jshint'); var concat = require('gulp-concat'); var uglify = require('gulp-uglify'); var rename = require('gulp-rename');

4. Create tasks

// Syntax check gulp.task('jshint'), function() { gulp.src('project/src/js/*.js') .pipe(jshint()) .pipe(jshint.reporter('default')); }); Gulp.task ('minify', 'minify', 'minify') function(){ gulp.src('project/src/js/*.js') .pipe(concat('all.js')) .pipe(gulp.dest('project/dist/js')) .pipe(uglify()) .pipe(rename('all.min.js')) .pipe(gulp.dest('project/dist/js')) }); Gulp.task ('watch', function(){gulp.watch('project/ SRC /js/*.js', ['jshint', 'minify']); }); / / the default task gulp. Task (' default '[' jshint', 'minify', 'watch']);

Gulp entry – SegmentFault

5. Run the gulp

Back on the command line, you can run gulp directly.

gulp

This executes the defined default task, which has the same effect as the following command.

gulp default

Of course, we can run any task defined in gulpfile.js, for example, now run the scripts task:

gulp minify

Official API Documentation

More

Gulp 4.0 Foresight – SegmentFault Gulp Thinking – Gulp Advanced Tricks-SegmentFault

Above, welcome to clap brick ax correct.