우리 모두 알고 있듯이 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('../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 파일. (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의 가치를 얻는 방법
🎜 🎜nodejs를 사용하여 채팅 기능을 구현하는 방법은 무엇입니까? 🎜🎜위 내용은 Gulp를 사용하여 정적 웹 페이지의 모듈화를 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!