정적 페이지에 포함을 구현하고 공통 코드를 도입하는 방법의 예-JS 튜토리얼-php.cn

정적 페이지에 포함을 구현하고 공통 코드를 도입하는 방법의 예

巴扎黑

풀어 주다： 2017-09-26 09:43:13

원래의

1349명이 탐색했습니다.

다음 편집기는 정적 페이지에 공개 코드를 도입하기 위해 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(&#39;header.php&#39;); ?>
  <p>页面主体部分</p>
  <?php include(&#39;footer.php&#39;); ?>
</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(&#39;gulp&#39;);
var fileinclude = require(&#39;gulp-file-include&#39;);
 
gulp.task(&#39;fileinclude&#39;, function () {
  // 适配page中所有文件夹下的所有html，排除page下的include文件夹中html
  gulp.src([&#39;page/**/*.html&#39;, &#39;!page/include/**.html&#39;])
    .pipe(fileinclude({
      prefix: &#39;@@&#39;,
      basepath: &#39;@file&#39;
    }))
    .pipe(gulp.dest(&#39;dist&#39;));
});

로그인 후 복사

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(&#39;include/header.html&#39;)
  <p>页面主体部分</p>
  @@include(&#39;include/footer.html&#39;)
</body>
</html>

로그인 후 복사

를 실행하고 터미널에 다음 코드를 입력하여 실행 효과를 확인하세요.

gulp fileinclude

로그인 후 복사

index.html 파일이 포함된 추가 dist 폴더가 있음을 확인하세요. gulp-file-include를 사용하면 최종 컴파일된 index.html 파일이 생성됩니다.

아마도 gulpfile.js에서 최종 생성된 파일의 위치를 수동으로 설정할 수 있습니다. 바로

gulp.dest(&#39;dist&#39;)

로그인 후 복사

5. 정적 페이지에 공개 코드가 도입됩니다. 문제는 해결되었지만 소스 html을 작성한 후 매번 수동으로 컴파일 작업을 수행하기 위해 터미널로 이동하는 것이 여전히 매우 번거롭습니다. 파일을 자동으로 컴파일할 수 있습니까? 대답은 '예'여야 합니다. gulp에는 파일이 변경되었는지 모니터링하는 watch 메서드가 있습니다. 다음과 같이 gulpfile.js 파일을 약간 수정하고 모니터링 코드를 추가하기만 하면 됩니다. , 터미널에 로그인하기만 하면 됩니다. 소스 HTML을 저장할 때마다 gulp가 자동으로 이를 컴파일합니다.

지금까지 정적 페이지에 공개 코드를 도입하기 위해 include를 구현하는 방법에 대한 문제가 성공적으로 해결되었습니다.

위 내용은 정적 페이지에 포함을 구현하고 공통 코드를 도입하는 방법의 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!