Home > Developer > JavaScript
Details about how Gulp implements static Web page modularization.
Preface
Some embarrassing problems are inevitable in the Process of pure static page development. For example, the entire Code contains 50 pages, 40 of which are the same as the modules at the top and bottom of the page. We copied the same two pieces of code 40 times (the most uncomfortable method ). Then, the problem is solved in this way. Then, the product manager looked at it several times and suddenly said that a piece on the top needs to be changed to the design... Suddenly I feel so embarrassed ~~ (My heart is a great horse ~), What then? Then we will look forward to the next great horse race !!!
Although there are many solutions to similar problems, a more reliable solution than iframe without various frameworks is simply a front-end solution that can be completed using a build tool like gulp. Although there may be a slight flaw in the experience (gulp is required for previewing each time the file is changed), it is not intolerable. After all, all we want is to change a public module to achieve the goal of solving 40 pages.
Introduction to gulp
Gulp is an automated build tool. In a developed project, you can use gulp to automatically build the project, greatly improving work efficiency.
Install gulp
Before installing gulp, make sure that node. js is correctly installed and install gulp in the project root directory:
$ npm install gulp
Example of Development Environment Configuration:
Windows: Set up a project in iis to facilitate preview in the browser. Use the webstorm Editor (used to, it feels much easier to use than notepad, and some folders can be ignored ).
MacOs: Build a project in apache to facilitate preview in the browser; Use the webstorm Editor (used to, I feel a little more liu than sublime, and can ignore some folders ).
Required plug-ins:
Gulp-file-include
Skill description:
Place the html code that requires modularization into an independent html file. Example: head.html
Use @ include ('./head.html ')
File Path customization ~~
Configure gulp and execute
Use Demo:
Html:
<!DOCTYPE html>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:
Run
gulp prewThe file is copied to the prew directory and the corresponding complete html file is generated. (Note:Here, the files in the pages folder are directly stored in the prew root directory, not prew/pages. Modify the configuration as needed)Run
gulp watchLater, gulp will establish a listening process. After each file is modified during development, gulp will automatically execute prew, so that it does not need to be manually executed every time.gulp prewAnd then click the browser. (This is a practical skill)Finally:
The main point of this skill set is not how to use gulp, but how to divide modules. In addition to html code, each module can also have js, css code, or Code that introduces js and css files.
Summary
The above is all the content of this article. I hope the content of this article has some reference and learning value for everyone's learning or work. If you have any questions, please leave a message to us, thank you for your support.
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
