gulp-static Web page modularity

Objective:

In the process of doing pure static page development, inevitably encounter some embarrassing problems. For example: The entire code has 50 pages, 40 of which have the same top and bottom modules. So the same two pieces of code we copied 40 times (the most uncomfortable way). Then the problem is solved. Then, the product manager saw a few times and suddenly said that the top of a block need to change the design ... Suddenly feel good embarrassed ~ ~ (Heart is steeds ~), then? Then look forward to the next steeds!!!

While there are a lot of solutions to similar problems, a more reliable solution than an IFRAME can be accomplished with a purely front-end, without a variety of frameworks, than with build tools like gulp. Although there may be a slight flaw in the experience (each time you change the file to preview it, you need to gulp it first), but it is not unbearable. After all, we want to change a public module to achieve the purpose of resolving 40 pages.

Examples of development environment configuration:

Windows: Build your project in IIS to make it easy to preview in your browser; Use the Webstorm editor (you're used to feeling a lot better than Notepad, and you can ignore some folders).

MacOs: Build your project in Apache to make it easy to preview in your browser; Use the Webstorm editor (used to feel a little bit more than sublime, you can ignore some folders).

Required Plugins:

Gulp-file-include

Skill Description:

Place the HTML code that needs to be modular into a separate HTML file. such as: head.html

Then use it where you need it: @ @include ('./head.html ')

File Path Customization ~ ~

Finally, the gulp is configured and executed.

Use Demo:

Html:

<! DOCTYPE html>@ @include (' ... /layout/head.html ') <div class= "News" >    </div>@ @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 ' ]})           

Skills Introduction:

Executing gulp prew Copies the files to the Prew directory and generates the corresponding full HTML file. (Note: Here the files under the Pages folder are placed directly under the Prew root directory, not prew/pages.) Self-configuring as needed)

After performing Gulp Watch Gulp will establish a listening process, the development of each time the file is modified, gulp will automatically execute prew, so that you do not have to manually execute Gulp prew and then to brush the browser. (This is a practical skill)

At last:

The main point of this set of skills is not how to use gulp, but how to divide the module. Each module in addition to HTML code, in fact, can also have JS, CSS code, or introduce JS, CSS file code, so as to more modules.

gulp-static Web page modularity