Gulp는 정적 웹 페이지 모듈화 예제 공유를 구현합니다.-JS 튜토리얼-php.cn

Gulp는 정적 웹 페이지 모듈화 예제 공유를 구현합니다.

小云云

풀어 주다： 2018-01-11 09:35:07

원래의

1979명이 탐색했습니다.

순전히 정적인 페이지를 개발하는 과정에서 당황스러운 문제에 직면하게 되는 것은 불가피합니다. 예를 들어 전체 코드 세트에는 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 파일을 소개하는 코드가 있을 수 있으므로 더 모듈화될 수 있습니다.