search

Home  >  Article  >  Web Front-end  >  How to implement modularization of static web pages using Gulp?

How to implement modularization of static web pages using Gulp?

亚连
亚连Original
2018-06-12 18:09:382067browse

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(&#39;../Layout/head.html&#39;)
<p class="news"> 
</p>
@@include(&#39;../Layout/foot.html&#39;)
</body>

gulp: 

var gulp = require(&#39;gulp&#39;),
 fileinclude = require(&#39;gulp-file-include&#39;);
gulp.task(&#39;prew&#39;, function () {
 gulp.src([&#39;*.html&#39;,&#39;pages/*.html&#39;, &#39;!node_modules/**/*.html&#39;])
  .pipe(fileinclude({
   prefix: &#39;@@&#39;,
   basepath: &#39;@file&#39;
  }))
  .pipe(gulp.dest(&#39;prew&#39;));
 gulp.src([&#39;**/**.js&#39;, &#39;!node_modules/**/*&#39;]).pipe(gulp.dest(&#39;prew/&#39;));
 gulp.src([&#39;**/**.css&#39;, &#39;!node_modules/**/*&#39;]).pipe(gulp.dest(&#39;prew/&#39;));
 gulp.src([&#39;**/*.jpg&#39;,
  &#39;**/*.jpge&#39;,
  &#39;**/*.png&#39;,
  &#39;**/*.gif&#39;,
  &#39;**/*.bmp&#39;, &#39;!prew/**/*&#39;, &#39;!node_modules/**/*&#39;]).pipe(gulp.dest(&#39;prew/&#39;));
});
gulp.task(&#39;watch&#39;,function () {
 gulp.watch([&#39;pages/*.html&#39;,&#39;css/*.css&#39;,&#39;img/**/*&#39;,&#39;!prew/**/*.html&#39;,&#39;!prew/**/*.css&#39;,&#39;!prew/img/**/*&#39;], [&#39;prew&#39;]);
})

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!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to integrate vux in vue.js to implement pull-up loading and pull-down refreshNext article：How to integrate vux in vue.js to implement pull-up loading and pull-down refresh

Related articles

See more