Gulp如何实现静态网页模块化
这篇文章给大家分享的是有关Gulp如何实现静态网页模块化的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
成都创新互联公司是一家以网络技术公司，为中小企业提供网站维护、成都做网站、网站建设、网站备案、服务器租用、国际域名空间、软件开发、微信小程序开发等企业互联网相关业务，是一家有着丰富的互联网运营推广经验的科技公司，有着多年的网站建站经验，致力于帮助中小企业在互联网让打出自已的品牌和口碑，让企业在互联网上打开一个面向全国乃至全球的业务窗口：建站电话联系：18980820575
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：
@@include('../Layout/head.html')
@@include('../Layout/foot.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']);
})技能介绍：
执行 gulp prew 会将文件复制到prew目录下，并生成对应的完整html文件。（注：此处将pages文件夹下的文件直接放到了prew根目录下，并非prew/pages。根据需要自改配置）
执行 gulp watch后gulp会建立一个监听进程，在开发的时候每次修改文件后，gulp会自动执行prew，这样就不用每次都手动执行gulp prew然后再去刷浏览器。（这是一招实用技能）
最后：
这套技能的要点不在于如何使用gulp，而是怎么去划分模块。每个模块除了有html代码以外，其实还可以有js、css代码或者引入js、css文件的代码，这样才能更模块一点。
感谢各位的阅读！关于“Gulp如何实现静态网页模块化”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
网页名称：Gulp如何实现静态网页模块化
链接地址：
http://bzwzjz.com/article/ggopsd.html
