This is the 30th day of my participation in the August Challenge

Today, learn front-end automation tools: (GULP)! Check the gaps! Do do do

Can serve as a beginner’s learning route, can refer to, learning progress is not particularly driven! Ongoing update

Combined with their own understanding, simple and comprehensive summary of the basic knowledge points in the process of learning JavaScript in vernacular Chinese, easy to deepen understanding!

Let’s get started! ‘Only a firm foundation can build a tall building ‘! Come on! Take it seriously!

1. 4. Smart water bottle

(Several design patterns):

Design patterns: a set of repeated, familiar, catalogued code design lessons.

  1. The singleton pattern
  2. The factory pattern
  3. Observer model

1. Front-end automation toolsgulpInstall environment & plug-ins

First installation node. Js

Run the node -v command to view the node installation version

Create a gulp directory and run the following command to access the gulp directory: NPM install gulp –save-dev

2. What is GULP?

Gulp — Front-end automation tool

Functions (plug-in functions) :

  • Automatically compress JS files and CSS files
  • Automatically compress image files
  • Automatic file merge
  • .

3. Methods in GULP

-task() Assigns tasks

Three parameters:

  • First parameter: Task name Default task default
  • Second argument: The other tasks that this task depends on are an array (optional)
  • Third argument: Task callback function (task execution)

There are two ways to perform other tasks:

  • The first option is to use default task dependency execution
  • Second: gulP task name

SRC () Source file path (parameter can be an array) dest() Destination file path folder name in dest parameter can be automatically created pipe() pipe method to indicate the pipe, i.e., “next step”

Watch () listens for two arguments: the first argument: the path to the file to listen for and the second argument: the array of task names to listen for

4. Gulp plugin

  • gulp-sass Convert SASS file to CSS file (it may not be installed)
  • gulp-cssmin Compressing CSS Files
  • gulp-uglify Compressed JS files
  • gulp-concat Merge files
  • gulp-rename rename
  • gulp-imageminCompressed image file
  • .

Plug-in installation:

NPM install --save-dev plugin nameCopy the code

Batch installation:

Copy package.json to your project directory and run NPM install to install the plug-in in batches

Describes the gulB installation process

1. Install Node.js first

2. Install gulp globally

Command:

npm  install gulp -g
Copy the code

Install gulp in the project directory

Start by changing the CMD directory to the project directory:

Switch to drive E command E:

Go to the testDemo project directory and run the command

cd testDemo
Copy the code

The command to partially install gulp in this project directory is:

   npm install gulp --save-dev
Copy the code

After the installation, run gulp -v to check whether the installation is successful

# E:\jd>gulp -v
[22:36:39] CLI version 3.9.1
[22:36:39] Local version 3.9.1
Copy the code

4. Configure the package.json file

Command:

npm  init -y
Copy the code

5. Install the gulp plug-in

Some frequently used plug-ins are listed above.

Command:

NPM install --save-dev plugin nameCopy the code

Such as:

npm install --save-dev gulp-cssmin
npm install --save-dev gulp-uglify
Copy the code

Preview: Come on, dream chasers

Learning is a continuous process, stick to it, there will be harvest!

Accumulate over a long period, consolidate the foundation, early into Dachang!

It’s not easy to keep it up, and it’s not easy to keep it up. You’re great!

Calm Down & Carry On!

Read more:

Review of previous updates

【 relearn JS】 Every day to strengthen the foundation of the series of articles:

[to JS] talk about design patterns, and several ways of singleton factory | | the observer pattern, some kinds of modes of inheritance to JS 】 【 & closures & singleton pattern, prototype and prototype chain to JS 】 【 | | factory pattern constructors, consolidate the foundation – to revisit JS 】 【 object oriented/process/class and object oriented

Day23 – The front end also needs to understand some databases

【day1】

Day2 various operators, DAY3 data types, DAY4 loop structures & conditional statements, DAY5 functions (emphasis), day6 scopes & events,

【 DAY7 】 object & array method summary, 【day8】 string method & partial sorting,

【 DAY9 】Math object & Wrapper Function, 【 DAY10 】BOM- Browser object model,

【 DAY11 】DOM- Document Object Model

【 DAY13 】Event Event object first known (2),

【 DAY14 】 Event delegate & Drag principle

【 DAY15 】 Drag-and-drop implementation & regular introduction, 【 DAY16 】 regular specific method,

【 DAY17 】cookie, 【day18】ES6,

[DAY19] Js motion function encapsulation

[DAY21] Study and review in the first three weeks

[DAY22] Server and client

More on the way… A long way to go ==-.. – = =