Gulp를 사용하여 정적 웹 페이지의 모듈화를 구현하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

Gulp를 사용하여 정적 웹 페이지의 모듈화를 구현하는 방법은 무엇입니까?

亚连

풀어 주다： 2018-06-12 18:09:38

원래의

2059명이 탐색했습니다.

우리 모두 알고 있듯이 Gulp.js는 개발자가 프로젝트 개발 중에 일반적인 작업을 자동화하는 데 사용할 수 있는 자동화된 빌드 도구입니다. 다음 글에서는 Gulp의 정적 웹 페이지 모듈화 구현에 대한 관련 정보를 주로 소개합니다. 이 글은 필요한 친구들이 참고할 수 있도록 샘플 코드를 통해 자세히 소개합니다.

머리말

순전히 정적인 페이지를 개발하는 과정에서 당황스러운 문제에 직면하는 것은 불가피합니다. 예를 들어 전체 코드 세트에는 50페이지가 있으며 그 중 40페이지에는 동일한 상단 및 하단 모듈이 있습니다. 그런 다음 동일한 두 코드 조각을 40번 복사했습니다(가장 불편한 방법). 그런 다음 문제가 해결되었습니다. 그러다가 몇 번을 보다가 갑자기 제품 관리자가 윗부분의 특정 부분을 다시 디자인해야 한다고 말하더군요. . . 갑자기 너무 부끄러워요~~ (내 마음은 질주하는 말로 가득해요~) 다음은요? 그렇다면 다음에는 수천 마리의 말이 질주할 것을 기대합니다! ! !

비록 유사한 문제에 대한 솔루션은 많지만, 다양한 프레임워크를 사용하지 않는 순수 프런트엔드의 경우, 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를 구성하고 실행

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(&#39;../Layout/head.html&#39;)
<p class="news"> 
</p>
@@include(&#39;../Layout/foot.html&#39;)
</body>

로그인 후 복사

gulp:

var gulp = require(&#39;gulp&#39;),
 fileinclude = require(&#39;gulp-file-include&#39;);
gulp.task(&#39;prew&#39;, function () {
 gulp.src([&#39;*.html&#39;,&#39;pages/*.html&#39;, &#39;!node_modules/**/*.html&#39;])
  .pipe(fileinclude({
   prefix: &#39;@@&#39;,
   basepath: &#39;@file&#39;
  }))
  .pipe(gulp.dest(&#39;prew&#39;));
 gulp.src([&#39;**/**.js&#39;, &#39;!node_modules/**/*&#39;]).pipe(gulp.dest(&#39;prew/&#39;));
 gulp.src([&#39;**/**.css&#39;, &#39;!node_modules/**/*&#39;]).pipe(gulp.dest(&#39;prew/&#39;));
 gulp.src([&#39;**/*.jpg&#39;,
  &#39;**/*.jpge&#39;,
  &#39;**/*.png&#39;,
  &#39;**/*.gif&#39;,
  &#39;**/*.bmp&#39;, &#39;!prew/**/*&#39;, &#39;!node_modules/**/*&#39;]).pipe(gulp.dest(&#39;prew/&#39;));
});
gulp.task(&#39;watch&#39;,function () {
 gulp.watch([&#39;pages/*.html&#39;,&#39;css/*.css&#39;,&#39;img/**/*&#39;,&#39;!prew/**/*.html&#39;,&#39;!prew/**/*.css&#39;,&#39;!prew/img/**/*&#39;], [&#39;prew&#39;]);
})

로그인 후 복사

스킬 소개:

gulp prew를 실행하면 파일이 prew 디렉터리에 복사되고 해당 파일이 생성됩니다. 완전한 HTML 파일. (gulp prew 会将文件复制到prew目录下，并生成对应的完整html文件。（注：此处将pages文件夹下的文件直接放到了prew根目录下，并非prew/pages。根据需要自改配置）

执行 gulp watch后gulp会建立一个监听进程，在开发的时候每次修改文件后，gulp会自动执行prew，这样就不用每次都手动执行gulp prew참고:

pages 폴더의 파일은 prew/pages가 아닌 prew 루트 디렉터리에 직접 배치됩니다. 필요에 따라 구성을 변경하세요.) 실행 gulp watch를 사용하면 gulp는 개발 중에 파일이 수정될 때마다 자동으로 prew를 실행하므로 매번 gulp prew를 수동으로 실행할 필요가 없습니다. 그런 다음 브라우저를 새로 고치십시오. (실용적인 스킬입니다)

마지막으로:

이 스킬 세트의 포인트는 꿀꺽 꿀꺽 마시는 방법이 아니라 모듈을 나누는 방법입니다. HTML 코드 외에도 각 모듈에는 js, css 코드 또는 js 및 css 파일을 도입하는 코드가 있을 수 있으므로 더욱 모듈화될 수 있습니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다. 관련 기사:

node.js 및 기타 기술을 사용하여 로그인 및 등록 기능을 구현하는 방법은 무엇입니까?

JS를 사용하여 SessionStorage의 가치를 얻는 방법

JS의 호환 브라우저 문제에 관해

Axios 구성 단계 정보(자세한 튜토리얼)

Vuex의 모듈식 구성에 대한 자세한 설명

🎜 🎜nodejs를 사용하여 채팅 기능을 구현하는 방법은 무엇입니까? 🎜🎜

위 내용은 Gulp를 사용하여 정적 웹 페이지의 모듈화를 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!