집 > 기사 > 웹 프론트엔드 > include는 공개 코드 구현 방법을 소개합니다.

include는 공개 코드 구현 방법을 소개합니다.

小云云원래의: 2018-02-02 13:08:212890검색

저희 회사 프론트엔드는 오랫동안 PHP의 include 기능을 사용해 머리글, 바닥글 등의 공통 코드를 도입해 왔습니다. 이번 글에서는 정적 페이지에 공통 코드를 삽입하기 위해 include를 구현하는 예를 주로 소개합니다. 에디터가 꽤 좋다고 생각해서 지금 공유해서 참고용으로 올려보겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

다음과 같습니다:

<!-- 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를 사용하여 정적 페이지를 APP로 패키징하는 웹앱을 만드는 프로젝트가 필요했는데, 이것이 나에게 문제를 안겨주었습니다.

작은 프로젝트라면 수동으로 여러 번 복사하여 붙여넣으면 됩니다. 그러나 페이지가 많으면 복사-붙여넣기 솔루션은 확실히 신뢰성이 떨어지고 유지 관리 비용이 높습니다.

많은 정보를 확인한 후 마침내 문제를 해결하기 위해 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 프로젝트 디렉터리 구조를 만들고 테스트 코드를 추가합니다

. 프로젝트의 전체 디렉토리 구조는 다음과 같아야 합니다.

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>

4 ,

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

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는 공개 코드 구현 방법을 소개합니다.

관련 기사