HTML code reuse practices and html code reuse

HTML code reuse practices and html code reuse
Preface

We can see from the design diagram that some pages we do are the same. For example, the header, bottom, and sidebar. If you are creating static pages, you can copy and paste the repeated parts to a new page, if the number of pages goes up and the public part in the middle shows the place to be repaired. However, this public IP is used on the top 10 pages.htmlCode. Isn't it difficult to modify it?

For back-end students, they can use templates for splitting. This can improvehtmlCode reusability and maintainability. But for those who just make the design drawing into static pages,htmlNo image template providedincludeThis method. But I don't want to use backend templates. the following tools may help you.

Gulp-file-include

The first one I want to introduce isgulpProvidedincludeThe method allows us to separate the public part like the backend template. And providesincludeThere are many configuration items in the method. For details, see gulp-file-include.

Below we write a smalldemoTo quickly understand, we need to installgulpAndgulp-file-include.

npm install -g gulpmkdir gulp-file-include && cd gulp-file-includenpm install  gulp --save-devnpm install gulp-file-include

After installation, you can simply organize the directory of the file:

|-Node_modules |-src // html storage folder in the production environment |-include // html storage folder in the public part | -*. html |-dist // The edited html file gulpfile. js

Ingulpfile.js, Configuredgulp-file-include:

var gulp = require('gulp');var fileinclude  = require('gulp-file-include');gulp.task('fileinclude', function() {    gulp.src('src/**.html')        .pipe(fileinclude({          prefix: '@@',          basepath: '@file'        }))    .pipe(gulp.dest('dist'));});

Create twohtmlFiles, respectively, header and bottom:

Header.html

<H1> This is the header content 

Footer.html

<H1> This is footer's content 

Finally, createhtml, To useheaderAndfooterToincludeCome in.

Layout.html

<! DOCTYPE html> 

Return to the command line tool and executegulp fileinclude:

After the compilation is completedistThere islayout.html.

Now, after a small instance above is clear. You may be able to provide productivity in your future work, so that you can write your ownhtmlCode is more maintainability and reusable.

Front-end Template

As mentioned abovegulp-file-includeSimple and easy to use. It is a good tool for those who do not want to use templates. However, if you are familiar with front-end templates, you can also use them.htmlCode maintainability and reusability. Then I will use a commonly usedejsThis template tells us how to separate the public parts.htmlFile.

Copy the entire folder in the previous example to a new place and change the nameejs. Nextnode_modulesFolder to delete,distFolderhtmlAll files are deleted.

UsedejsTemplate, you needsrcInsidehtmlAll file suffix names are modified.ejs. SetejsCompile the filehtmlThe tool is still usedgulp. You only need to installgulp-ejsYou can.

npm install gulp --save-devnpm install gulp-ejs --save-dev 

The next step is to modifygulpflie.jsFile:

var gulp = require('gulp');var ejs  = require('gulp-ejs');gulp.task('ejs', function() {    gulp.src('src/**.ejs')        .pipe(ejs())    .pipe(gulp.dest('dist'));});

Then modifylayout.ejsFile:

<! DOCTYPE html> 

Finally, run it in the command line tool.gulp ejsIndistDirectory to see the compiledlayout.htmlFile. This is all done.

In fact, templates have many powerful methods, and the above example mainly demonstratesincludeThis method may be a little practical. If you are interested, you can learn more about the template methods.