Rumah > Artikel > hujung hadapan web > 使用Gulp如何实现静态网页模块化具体怎么做?
众所周知Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。下面这篇文章主要给大家介绍了关于Gulp实现静态网页模块化的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下。
前言
在做纯静态页面开发的过程中,难免会遇到一些的尴尬问题。比如:整套代码有50个页面,其中有40个页面顶部和底部模块相同。那么同样的两段代码我们复制了40遍(最难受的方法)。然后,这个问题就这样解决了。再然后,产品经理看了几遍后突然说顶部的某块需要改改设计。。。突然感觉好尴尬~~(心里是万马奔腾~),然后呢?然后就期待下一次的万马奔腾!!!
虽然类似问题的解决方案很多,但是纯前端,不用各种框架的情况下,一种比iframe更靠谱的解决方案莫过于用像gulp这样的构建工具来完成。虽然在体验上也许会有一点小小的瑕疵(每次改完文件要预览,都需要先gulp一下),但是也并非是不能忍受。毕竟我们想要的仅仅是改一改某公共模块就能达到解决40个页面的目的。
gulp简介
gulp是一个自动化构建工具。在开发过工程中,能够使用gulp对项目进行自动构建,大大提高工作效率。
安装gulp
在安装gulp之前先要确认已经正确安装了node.js,然后在项目根目录下安装gulp:
$ npm install gulp
举例的开发环境配置:
Windows:在iis里搭建项目,方便在浏览器中预览;使用webstorm编辑器(习惯了,感觉比记事本还是要好用很多,还可以忽略某些文件夹)。
MacOs: 在apache里搭建项目,方便在浏览器中预览;使用webstorm编辑器(习惯了,感觉比sublime用得更liu一点,还可以忽略某些文件夹)。
必备插件:
gulp-file-include
技能描述:
将需要模块化的html代码放到一个独立的html文件中。如:head.html
然后在需要使用的地方使用:@@include('./head.html')
文件路径自定义~~
最后配置好gulp并执行
使用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>
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']); })
技能介绍:
执行 gulp prew
会将文件复制到prew目录下,并生成对应的完整html文件。(注:此处将pages文件夹下的文件直接放到了prew根目录下,并非prew/pages。根据需要自改配置)
执行 gulp watch
后gulp会建立一个监听进程,在开发的时候每次修改文件后,gulp会自动执行prew,这样就不用每次都手动执行gulp prew
然后再去刷浏览器。(这是一招实用技能)
最后:
这套技能的要点不在于如何使用gulp,而是怎么去划分模块。每个模块除了有html代码以外,其实还可以有js、css代码或者引入js、css文件的代码,这样才能更模块一点。
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
Atas ialah kandungan terperinci 使用Gulp如何实现静态网页模块化具体怎么做?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!