How to implement modularization of static web pages using Gulp?
As we all know, Gulp.js is an automated build tool that developers can use to automatically perform common tasks during project development. The following article mainly introduces you to the relevant information about Gulp's implementation of static web page modularization. The article introduces it in detail through sample code. Friends in need can refer to it.
Preface
In the process of developing purely static pages, it is inevitable that you will encounter some embarrassing problems. For example: the entire set of code has 50 pages, of which 40 pages have the same top and bottom modules. Then we copied the same two pieces of code 40 times (the most uncomfortable method). Then, the problem was solved. Then, after looking at it a few times, the product manager suddenly said that a certain part of the top part needed to be redesigned. . . Suddenly I feel so embarrassed~~ (My heart is full of horses galloping~), what next? Then I look forward to the next galloping of thousands of horses! ! !
Although there are many solutions to similar problems, if it is purely front-end and does not require various frameworks, a more reliable solution than iframe is to use a construction tool like gulp to complete it. Although there may be some minor flaws in the experience (every time you want to preview a file after modifying it, you need to gulp it first), it is not unbearable. After all, what we want is to solve 40 pages by just changing a certain public module.
Introduction to gulp
gulp is an automated build tool. In developed projects, gulp can be used to automatically build the project, greatly improving work efficiency.
Installing gulp
Before installing gulp, you must first confirm that node.js has been installed correctly, and then install gulp in the project root directory:
$ npm install gulp
Example development environment configuration:
Windows: Build the project in iis to facilitate previewing in the browser; use the webstorm editor (Once you get used to it, it feels much easier to use than Notepad, and you can also ignore certain folders).
MacOs: Build the project in apache to facilitate previewing in the browser; use the webstorm editor (get used to it, it feels more useful than sublime, and you can ignore certain folders).
Required plug-in:
gulp-file-include
Skill description:
Put the HTML code that needs to be modularized into a separate HTML file. For example: head.html
Then use it where you need to use it: @@include('./head.html')
Customize the file path~~
Finally Configure gulp and execute
Use Demo:
html：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0"> <title></title> <link rel="stylesheet" href="css/comm.css?v=1.13" rel="external nofollow" > <link rel="stylesheet" href="css/template.css" rel="external nofollow" > <link rel="stylesheet" href="css/news.css" rel="external nofollow" > </head> <body> @@include('../Layout/head.html') <p class="news"> </p> @@include('../Layout/foot.html') </body>
gulp:
var gulp = require('gulp'),
fileinclude = require('gulp-file-include');
gulp.task('prew', function () {
gulp.src(['*.html','pages/*.html', '!node_modules/**/*.html'])
.pipe(fileinclude({
prefix: '@@',
basepath: '@file'
}))
.pipe(gulp.dest('prew'));
gulp.src(['**/**.js', '!node_modules/**/*']).pipe(gulp.dest('prew/'));
gulp.src(['**/**.css', '!node_modules/**/*']).pipe(gulp.dest('prew/'));
gulp.src(['**/*.jpg',
'**/*.jpge',
'**/*.png',
'**/*.gif',
'**/*.bmp', '!prew/**/*', '!node_modules/**/*']).pipe(gulp.dest('prew/'));
});
gulp.task('watch',function () {
gulp.watch(['pages/*.html','css/*.css','img/**/*','!prew/**/*.html','!prew/**/*.css','!prew/img/**/*'], ['prew']);
})Skill introduction:
Execute gulp prew will copy the file to the prew directory , and generate the corresponding complete html file. (Note: Here the files in the pages folder are placed directly in the prew root directory, not prew/pages. Change the configuration as needed)
Execute gulp watchAfterwards, gulp will establish a listening process. Every time a file is modified during development, gulp will automatically execute prew, so that there is no need to manually execute it every time. gulp prewAnd then Go refresh the browser. (This is a practical skill)
Finally:
The key point of this set of skills is not how to use gulp, but how to divide it module. In addition to html code, each module can also have js, css code or code that introduces js and css files, so that it can be more modular.
The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
How to use node.js and other technologies to implement the login and registration function?
How to get the value of SessionStorage using JS
Issues about compatible browsers in JS
Configuration steps about Axios (detailed tutorial)
Detailed interpretation of modular organization in Vuex
How to implement chat function using nodejs?
The above is the detailed content of How to implement modularization of static web pages using Gulp?. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1377
52
How to Optimize the Maintainability of Java Code: Experience and Advice
Nov 22, 2023 pm 05:18 PM
How to Optimize the Maintainability of Java Code: Experience and Advice In the software development process, writing code with good maintainability is crucial. Maintainability means that code can be easily understood, modified, and extended without causing unexpected problems or additional effort. For Java developers, how to optimize the maintainability of code is an important issue. This article will share some experiences and suggestions to help Java developers improve the maintainability of their code. Following standardized naming rules can make the code more readable.
How to solve the code complexity error in Python code?
Jun 24, 2023 pm 05:43 PM
Python is a simple, easy-to-learn and efficient programming language, but when we write Python code, we may encounter some problems with excessive code complexity. If these problems are not solved, it will make the code difficult to maintain, error-prone, and reduce the readability and scalability of the code. So, in this article, we will discuss how to resolve code complexity error in Python code. Understanding Code Complexity Code complexity is a measure of the nature of code that is difficult to understand and maintain. In Python, there are some indicators that can be used
How to solve the poor maintainability error of Python code?
Jun 25, 2023 am 11:58 AM
Python, as a high-level programming language, is widely used in software development. Although Python has many advantages, a problem that many Python programmers often face is that the maintainability of the code is poor. The maintainability of Python code includes the legibility, scalability, and reusability of the code. In this article, we will focus on how to solve the problem of poor maintainability of Python code. 1. Code readability Code readability refers to the readability of the code, which is the core of code maintainability.
Guide to implementing modular development in Vue large-scale projects
Jun 09, 2023 pm 04:07 PM
In modern web development, Vue, as a flexible, easy-to-use and powerful front-end framework, is widely used in the development of various websites and applications. When developing large-scale projects, how to simplify the complexity of the code and make the project easier to maintain is a problem that every developer must face. Modular development can help us better organize code, improve development efficiency and code readability. Below, I will share some experiences and guidelines for implementing modular development in Vue large-scale projects: 1. Clear division of labor in a large-scale project
What is modularity in vue
Dec 23, 2022 pm 06:06 PM
In Vue, modularization is to encapsulate a single function into a module (file). The modules are isolated from each other, but internal members can be exposed through specific interfaces, and they can also rely on other modules (to facilitate code reuse, thus Improve development efficiency and facilitate later maintenance). The benefits of modular development: 1. Clear organization and easy maintenance; 2. All data will not be requested back at once, and the user experience is good; 3. Modules are isolated from each other, but internal members can be exposed through specific interfaces, or Depends on other modules.
How to use Go language for code modularization practice
Aug 03, 2023 am 10:31 AM
How to use Go language for code modularization practice Introduction: In software development, code modularization is a common development methodology. By dividing the code into reusable modules, the maintainability, testability and testability of the code can be improved. Reusability. This article will introduce how to use Go language to practice code modularization and provide corresponding code examples. 1. The advantages of modularization improve code maintainability: Modularization divides the code into independent functional modules, each module is responsible for specific tasks, making the code clearer and easier to modify. The code can be improved
Summary of Python development experience: practices to improve code maintainability and scalability
Nov 22, 2023 pm 12:22 PM
Summary of Python development experience: Practices to improve code maintainability and scalability. In the software development process, we often encounter demand changes, function iterations, etc., so the maintainability and scalability of the code have become an important part of the development process. Issues that must be taken seriously. Especially in Python development, how to improve the maintainability and scalability of code has become a common concern among developers. This article will summarize some practices to improve the maintainability and scalability of Python code, hoping to bring some benefits to Python developers.
Chaon launches TGS-1000 series industrial mini hosts: supports stacking interface expansion modules and is equipped with MTL processors
Aug 14, 2024 pm 01:33 PM
According to news from this website on August 14, Chaoen Vecow launched the TGS-1000 series industrial mini host equipped with the first generation Intel Core Ultra processor on July 22, Beijing time. The special feature of this series of products is that it supports vertical stacking to expand additional I/O ports. The TGS-1000 series is divided into two models: TGS-1000 and TGS-1500. The difference is that the bottom of the TGS-1500 contains a module that supports MXM graphics cards. It can choose Intel Ruixuan A370M or up to RTX5000Ada mobile version of Nvidia professional cards. ▲TGS-1500TGS-1000 series mini hosts are available with Intel Core Ultra7165H or Ultra5135H processors, equipped with dual D
