Gulp implements static web page modularization example sharing-JS Tutorial-php.cn

Gulp implements static web page modularization example sharing

小云云

Release： 2018-01-11 09:35:07

Original

1926 people have browsed it

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). As we all know, Gulp.js is an automated build tool that developers can use to automate 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.

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.

gulp introduction

gulp is an automated build tool. In developed projects, you can use gulp to automatically build the project, which greatly improves work efficiency.

Install gulp

Before installing gulp, first confirm that node.js has been installed correctly, and then install gulp in the project root directory:

$ npm install gulp

Copy after login

Example Development environment configuration:

Windows: Build the project in iis to facilitate previewing in the browser; use the webstorm editor (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 middle. 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>

Copy after login

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']);
})

Copy after login

Skill introduction:

Execute gulp prew The file will be copied to the prew directory and the corresponding complete html file will be generated. (Note: Here, the files in the pages folder are placed directly in the prew root directory, not prew/pages. Change the configuration as needed)

After executing gulp watch, gulp will establish a listening process. During development Every time you modify a file, gulp will automatically execute prew, so you don't have to manually execute gulp prew every time and then refresh the browser. (This is a practical skill)

Finally:

The point of this set of skills is not how to use gulp, but how to divide modules. In addition to html code, each module can actually also have js, css code or code that introduces js and css files, so that it can be more modular.

Related recommendations:

What happens when a project on github is published as a static web page?

Share an example of special effects code that simulates static web page paging

Summary of PHP's method of generating HTML pure static web pages from the entire website

The above is the detailed content of Gulp implements static web page modularization example sharing. For more information, please follow other related articles on the PHP Chinese website!