使用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!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1377
52
Cara Mengoptimumkan Kebolehselenggaraan Kod Java: Pengalaman dan Nasihat
Nov 22, 2023 pm 05:18 PM
Cara Mengoptimumkan Kebolehselenggaraan Kod Java: Pengalaman dan Nasihat Dalam proses pembangunan perisian, menulis kod dengan kebolehselenggaraan yang baik adalah penting. Kebolehselenggaraan bermakna kod boleh difahami dengan mudah, diubah suai dan dilanjutkan tanpa menyebabkan masalah yang tidak dijangka atau usaha tambahan. Bagi pembangun Java, cara mengoptimumkan kebolehselenggaraan kod adalah isu penting. Artikel ini akan berkongsi beberapa pengalaman dan cadangan untuk membantu pembangun Java meningkatkan kebolehselenggaraan kod mereka. Mengikuti peraturan penamaan piawai boleh menjadikan kod lebih mudah dibaca.
Bagaimana untuk menyelesaikan ralat kerumitan kod dalam kod Python?
Jun 24, 2023 pm 05:43 PM
Python ialah bahasa pengaturcaraan yang mudah, mudah dipelajari dan cekap, tetapi apabila kita menulis kod Python, kita mungkin menghadapi beberapa masalah dengan kerumitan kod yang berlebihan. Jika masalah ini tidak diselesaikan, ia akan menjadikan kod sukar untuk diselenggara, terdedah kepada ralat, dan mengurangkan kebolehbacaan dan kebolehskalaan kod. Jadi, dalam artikel ini, kita akan membincangkan cara menyelesaikan ralat kerumitan kod dalam kod Python. Memahami Kerumitan Kod Kerumitan kod ialah ukuran sifat kod yang sukar difahami dan dikekalkan. Dalam Python, terdapat beberapa penunjuk yang boleh digunakan
Bagaimana untuk menyelesaikan ralat kebolehselenggaraan yang lemah bagi kod Python?
Jun 25, 2023 am 11:58 AM
Python, sebagai bahasa pengaturcaraan peringkat tinggi, digunakan secara meluas dalam pembangunan perisian. Walaupun Python mempunyai banyak kelebihan, masalah yang sering dihadapi oleh ramai pengaturcara Python ialah kod tersebut kurang boleh diselenggara. Kebolehselenggaraan kod Python termasuk kebolehbacaan, kebolehskalaan dan kebolehgunaan semula kod tersebut. Dalam artikel ini, kami akan memberi tumpuan kepada cara menyelesaikan masalah kebolehselenggaraan kod Python yang lemah. 1. Kebolehbacaan kod Kebolehbacaan kod merujuk kepada kebolehbacaan kod, yang merupakan teras kebolehselenggaraan kod.
Panduan untuk melaksanakan pembangunan modular dalam projek berskala besar Vue
Jun 09, 2023 pm 04:07 PM
Dalam pembangunan web moden, Vue, sebagai rangka kerja hadapan yang fleksibel, mudah digunakan dan berkuasa, digunakan secara meluas dalam pembangunan pelbagai tapak web dan aplikasi. Apabila membangunkan projek berskala besar, bagaimana untuk memudahkan kerumitan kod dan menjadikan projek lebih mudah untuk diselenggara adalah masalah yang mesti dihadapi oleh setiap pemaju. Pembangunan modular boleh membantu kami menyusun kod dengan lebih baik, meningkatkan kecekapan pembangunan dan kebolehbacaan kod. Di bawah, saya akan berkongsi beberapa pengalaman dan garis panduan untuk melaksanakan pembangunan modular dalam projek berskala besar Vue: 1. Pembahagian kerja yang jelas dalam projek berskala besar
Apakah modulariti dalam vue
Dec 23, 2022 pm 06:06 PM
Dalam Vue, modularisasi adalah untuk merangkum satu fungsi ke dalam modul (fail) Modul diasingkan antara satu sama lain, tetapi mereka boleh mendedahkan ahli dalaman melalui antara muka tertentu atau bergantung pada modul lain (untuk memudahkan penggunaan semula kod, dengan itu Meningkatkan kecekapan pembangunan dan). memudahkan penyelenggaraan kemudian). Faedah pembangunan modular: 1. Organisasi yang jelas dan penyelenggaraan yang mudah 2. Semua data tidak akan diminta kembali sekaligus, dan pengalaman pengguna adalah baik 3. Modul diasingkan antara satu sama lain, tetapi ahli dalaman boleh didedahkan melalui tertentu; antara muka, atau Bergantung pada modul lain.
Cara menggunakan bahasa Go untuk amalan modularisasi kod
Aug 03, 2023 am 10:31 AM
Cara menggunakan bahasa Go untuk amalan modularisasi kod Pengenalan: Dalam pembangunan perisian, modularisasi kod ialah metodologi pembangunan biasa Dengan membahagikan kod kepada modul boleh guna semula, kebolehselenggaraan, kebolehujian dan kebolehgunaan kod boleh dipertingkatkan. Artikel ini akan memperkenalkan cara menggunakan bahasa Go untuk mempraktikkan modularisasi kod dan menyediakan contoh kod yang sepadan. 1. Kelebihan modularisasi meningkatkan kebolehselenggaraan kod: Modularisasi membahagikan kod kepada modul berfungsi bebas, setiap modul bertanggungjawab untuk tugas tertentu, menjadikan kod lebih jelas dan mudah diubah suai. Kod boleh diperbaiki
Ringkasan pengalaman pembangunan Python: amalan untuk meningkatkan kebolehselenggaraan dan kebolehskalaan kod
Nov 22, 2023 pm 12:22 PM
Ringkasan pengalaman pembangunan Python: Amalan untuk meningkatkan kebolehselenggaraan dan kebolehskalaan kod Dalam proses pembangunan perisian, kita sering menghadapi perubahan permintaan, lelaran fungsi, dsb., jadi kebolehselenggaraan dan kebolehskalaan kod telah menjadi bahagian penting dalam proses pembangunan. Isu yang mesti diambil serius. Terutamanya dalam pembangunan Python, cara meningkatkan kebolehselenggaraan dan kebolehskalaan kod telah menjadi kebimbangan umum di kalangan pembangun. Artikel ini akan meringkaskan beberapa amalan untuk meningkatkan kebolehselenggaraan dan skalabiliti kod Python, dengan harapan dapat membawa beberapa faedah kepada pembangun Python.
Chaon melancarkan hos mini industri siri TGS-1000: menyokong modul pengembangan antara muka susun dan dilengkapi dengan pemproses MTL
Aug 14, 2024 pm 01:33 PM
Menurut berita dari laman web ini pada 14 Ogos, Chaoen Vecow melancarkan hos mini industri siri TGS-1000 yang dilengkapi dengan pemproses Intel Core Ultra generasi pertama pada 22 Julai, waktu Beijing. Ciri istimewa siri produk ini ialah ia menyokong tindanan menegak untuk mengembangkan port I/O tambahan. Siri TGS-1000 dibahagikan kepada dua model: TGS-1000 dan TGS-1500 Perbezaannya ialah bahagian bawah TGS-1500 mengandungi modul yang menyokong kad grafik MXM Ia boleh memilih Intel Ruixuan A370M atau sehingga versi mudah alih RTX5000Ada kad profesional NVIDIA. ▲Hos mini siri TGS-1500TGS-1000 tersedia dengan pemproses Intel Core Ultra7165H atau Ultra5135H, dilengkapi dengan dwi D
