정적 페이지에 포함을 구현하고 공통 코드를 도입하는 방법의 예
- 巴扎黑원래의
- 2017-09-26 09:43:131297검색
다음 편집기는 정적 페이지에 공개 코드를 도입하기 위해 include를 구현하는 예를 보여줍니다. 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리고자 합니다. 편집기를 따라 살펴보겠습니다
오랫동안 우리 프런트엔드는 다음과 같이 머리글, 바닥글과 같은 일반적인 코드를 도입하기 위해 PHP의 포함 기능을 사용해 왔습니다.
<!-- index.php --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <?php include('header.php'); ?> <p>页面主体部分</p> <?php include('footer.php'); ?> </body> </html>
<!-- header.php --> <header>这是头部</header>
<!-- footer.php --> <footer>这是底部</footer>
최근까지 HBuilder를 사용하여 정적 페이지를 앱으로 패키징하는 웹앱을 만드는 프로젝트가 필요했는데, 이로 인해 문제가 발생했습니다.
작은 프로젝트라면 수동으로 여러 번 복사하여 붙여넣으면 됩니다. 그러나 페이지가 많으면 복사-붙여넣기 솔루션은 확실히 신뢰성이 떨어지고 유지 관리 비용이 높습니다.
많은 정보를 확인한 후 마침내 문제를 해결하기 위해 gulp를 사용하기로 결정했습니다.
1 gulp 설치 및 gulp-file-include
먼저 새 폴더를 만듭니다. 터미널 폴더 위치에서 파일을 찾은 다음 npm 초기화를 수행합니다
npm init
그런 다음 gulp를 설치하고
npm install gulp --save-dev
그런 다음 gulp-file-include를 설치합니다
npm install gulp-file-include --save-dev
2. gulpfile.js
그런 다음 gulpfile이라는 새 js 파일을 수동으로 만들고 그 안에 다음 코드를 작성합니다.
var gulp = require('gulp');
var fileinclude = require('gulp-file-include');
gulp.task('fileinclude', function () {
// 适配page中所有文件夹下的所有html，排除page下的include文件夹中html
gulp.src(['page/**/*.html', '!page/include/**.html'])
.pipe(fileinclude({
prefix: '@@',
basepath: '@file'
}))
.pipe(gulp.dest('dist'));
});3 프로젝트 디렉터리 구조를 만들고 테스트 코드를 추가합니다.
The 프로젝트의 전체 디렉토리 구조는 다음과 같아야 합니다
app page include header.html footer.html index.html gulpfile.js package.json
그런 다음 테스트 코드를 추가합니다. header.html 및 footer.html에 대해 중요한 것은 index.html이 특별한 비용을 지불해야 한다는 것입니다. 코드는 다음과 같습니다:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> @@include('include/header.html') <p>页面主体部分</p> @@include('include/footer.html') </body> </html>
4,
를 실행하고 터미널에 다음 코드를 입력하여 실행 효과를 확인하세요.
gulp fileinclude
index.html 파일이 포함된 추가 dist 폴더가 있음을 확인하세요. gulp-file-include를 사용하면 최종 컴파일된 index.html 파일이 생성됩니다.
아마도 gulpfile.js에서 최종 생성된 파일의 위치를 수동으로 설정할 수 있습니다. 바로
gulp.dest('dist')
5. 정적 페이지에 공개 코드가 도입됩니다. 문제는 해결되었지만 소스 html을 작성한 후 매번 수동으로 컴파일 작업을 수행하기 위해 터미널로 이동하는 것이 여전히 매우 번거롭습니다. 파일을 자동으로 컴파일할 수 있습니까? 대답은 '예'여야 합니다. gulp에는 파일이 변경되었는지 모니터링하는 watch 메서드가 있습니다. 다음과 같이 gulpfile.js 파일을 약간 수정하고 모니터링 코드를 추가하기만 하면 됩니다. , 터미널에 로그인하기만 하면 됩니다. 소스 HTML을 저장할 때마다 gulp가 자동으로 이를 컴파일합니다.
지금까지 정적 페이지에 공개 코드를 도입하기 위해 include를 구현하는 방법에 대한 문제가 성공적으로 해결되었습니다.
위 내용은 정적 페이지에 포함을 구현하고 공통 코드를 도입하는 방법의 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!