Gulp는 정적 웹 페이지 모듈화 예제 공유를 구현합니다.
- 小云云원래의
- 2018-01-11 09:35:071923검색
순전히 정적인 페이지를 개발하는 과정에서 당황스러운 문제에 직면하게 되는 것은 불가피합니다. 예를 들어 전체 코드 세트에는 50페이지가 있으며 그 중 40페이지에는 동일한 상단 및 하단 모듈이 있습니다. 그런 다음 동일한 두 코드 조각을 40번 복사했습니다(가장 불편한 방법). 우리 모두 알고 있듯이 Gulp.js는 개발자가 프로젝트 개발 중에 일반적인 작업을 자동화하는 데 사용할 수 있는 자동화된 빌드 도구입니다. 다음 글에서는 Gulp의 정적 웹 페이지 모듈화 구현에 대한 관련 정보를 주로 소개합니다. 이 글은 필요한 친구들이 참고할 수 있도록 샘플 코드를 통해 자세히 소개합니다.
비록 유사한 문제에 대한 솔루션은 많지만, 다양한 프레임워크를 사용하지 않는 순수 프런트엔드의 경우, iframe보다 더 안정적인 솔루션은 gulp와 같은 구성 도구를 사용하는 것입니다. 경험에 약간의 결함이 있을 수 있지만(파일을 수정한 후 미리보기를 할 때마다 먼저 꿀꺽꿀꺽 마셔야 함) 견딜 수 없는 것은 아닙니다. 결국 우리가 원하는 것은 특정 공개 모듈만 변경하여 40페이지를 해결하는 것입니다.
gulp 소개
gulp는 자동화된 빌드 도구입니다. 개발된 프로젝트에서는 gulp를 사용하여 자동으로 프로젝트를 빌드할 수 있어 작업 효율성이 크게 향상됩니다.
gulp 설치
gulp를 설치하기 전에 먼저 node.js가 올바르게 설치되었는지 확인한 다음 프로젝트 루트 디렉터리에 gulp를 설치하세요:
$ npm install gulp
개발 환경 구성 예시:
Windows: iis에서 프로젝트를 빌드하고, 브라우저에서 미리 보는 것이 편리합니다. 웹스톰 편집기를 사용하면 됩니다(익숙해지면 메모장보다 사용하기가 훨씬 쉽고 특정 폴더를 무시할 수도 있습니다).
MacOs: 브라우저에서 쉽게 미리 볼 수 있도록 Apache에서 프로젝트를 빌드합니다. 웹스톰 편집기를 사용하세요(익숙해지면 숭고한 것보다 더 유용하다고 느껴지며 일부 폴더는 무시할 수 있습니다).
필수 플러그인 :
gulp-file-include
스킬 설명 :
모듈화해야 할 HTML 코드를 별도의 HTML 파일에 넣어주세요. 예: head.html
그런 다음 필요한 곳에 사용하십시오: @@include('./head.html')
파일 경로 사용자 정의~~
마지막으로 gulp를 구성하고 실행하십시오
데모 사용:
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 파일이 생성됩니다. (참고: 여기서 페이지 폴더의 파일은 prew/pages가 아닌 prew 루트 디렉토리에 직접 배치됩니다. 필요에 따라 구성을 변경하십시오.)
gulp watch를 실행한 후 gulp는 개발 중에 매번 청취 프로세스를 설정합니다. 파일을 수정한 후 gulp는 자동으로 prew를 실행하므로 매번 수동으로 gulp prew를 실행하고 브라우저를 새로 고칠 필요가 없습니다. (실용적인 스킬입니다)
마지막으로:
이 스킬 세트의 핵심은 꿀꺽 꿀꺽 마시는 방법이 아니라 모듈을 나누는 방법입니다. HTML 코드 외에도 각 모듈에는 실제로 js, css 코드 또는 js 및 css 파일을 소개하는 코드가 있을 수 있으므로 더 모듈화될 수 있습니다.
관련 권장 사항:
github의 프로젝트가 정적 웹 페이지로 게시되면 어떻게 되나요?
정적 웹 페이지 페이징을 시뮬레이션하는 특수 효과 코드의 예 공유
전체 웹 사이트에서 HTML 순수 정적 웹 페이지를 생성하는 PHP 방법 요약
위 내용은 Gulp는 정적 웹 페이지 모듈화 예제 공유를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!