When we are completely separated from the front and back, there is a problem that has always been a headache, that is, the introduction of public headers and footer. In the case of traditional back-end rendering, we can write the header, footer as two separate templates, and then use the back-end language's include to be introduced in other pages. I previously in the "a simple rough front-end separation scheme," this article said one way, is to use handlebars the header, footer template precompiled to a JS file, and then in the head of the page with document.write write to the page. The disadvantage of this approach is also more obvious, that is, relying on a template engine. The use of the MVVM framework is common today, and the usage of static templates doesn't seem so high, so we can't rely on it too much.
In fact, if our project uses the Gulp build, it is easy to use gulp to complete the construction of the page. We can still write the header, footer two templates, and then use Gulp to the two templates to the various pages, the same can be reused, easy to modify the purpose.
The modules that need to be used are: Gulp, FS, Gulp-replace Three, define a task as follows:
//introduction of Head bottomGulp.task (' Include ',function() { varHtmldir = './html/'; Fs.readdir (Htmldir,function(err, files) {if(Err) {Console.log (err); } Else{Files.foreach (function(f) {if(f!== ' _header.html ' && f!== ' _footer.html ') {gulp.src (Htmldir+f). Pipe (replace (/<!--header-->[\s\s]*<!--headerend-->/, ' <!--header-->\n ' + fs.readfilesync (Htmldir + ' _ Header.html ', ' utf-8 ') + ' \n<!--headerend--> '). Pipe (replace (/<!--footer-->[\s\s]*<!--footerend-->/, ' <!--footer-->\n ' + fs.readfilesync (Htmldir + ' _ Footer.html ', ' utf-8 ') + ' \n<!--footerend--> ') . Pipe (Gulp.dest (Htmldir))}}); } });});
To explain briefly, first using the FS module to read the files in the target directory, I am here./html/, and then traverse through each file, putting placeholders <!--header-->< in the file!--headerend--> and <!-- footer--><!--footerend--> are replaced with the contents of _header.html and _footer.html respectively, and finally the output to the original directory is OK.
Since we need to replace the placeholder, our page structure should look like this, such as index.html
<!--Header--><!--Headerend - <Div>Index page</Div> <Script> </Script><!--Footer--><!--Footerend -
At the top and bottom respectively, the placeholder marks are written as above. After running gulp, it will be replaced with the contents of the header template and the footer template accordingly.
The content in _header.html is the upper half of an HTML page:
<HTML> <Head> <MetaCharSet= "Utf-8"> <Metaname= "Viewport"content= "Width=device-width, initial-scale=1,maximum-scale=1, User-scalable=no"> <Metaname= "Apple-mobile-web-app-capable"content= "Yes"> <Metaname= "Apple-mobile-web-app-status-bar-style"content= "BLACK"> <Linkrel= "stylesheet"href= "/css/main.css"> <Scriptsrc= "/lib/require.js"></Script> <Scriptsrc= "/js/common/config.js"></Script> </Head> <Body>
The content in _footer.html is the next half:
</ Body > </ HTML >
Why replace the placeholder with replace instead of concat the content directly to the page? This is due to the possibility that the Gulp task can be executed multiple times, the repeated append content cannot be controlled, so the method of replacing the content with the regular match, no matter how many times the task executes does not repeat the append content.
In fact, in order to make the header, footer template changes, other pages can also automatically update the content, we can add a watch task:
Gulp.task (' Watch ', function () { gulp.watch (['./html/_header.html ', './html/_footer.html '], [' include ']);});So when we start this watch task, we can listen to the header, footer changes and dynamically update the contents of all the pages.
Using gulp to solve the problem of header/footer introduction of front and rear end separation
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
