project 프로젝트의 빠른 전달 및/또는 : 간단한 스타터 프로젝트 : :
- GitHub 페이지의 자동 배포
- Github에 릴리스를 게시하십시오
이 프로젝트는 다음을 포함하여 GULP로 작업을 자동화하는 예제 프로젝트를 제공합니다.
이 프로젝트에는 컴파일하기 위해 충족해야 할 몇 가지 요청이 있습니다.
프로젝트 사용을 시작하려면 GIT 명령으로 PC에 복제해야합니다. [your-project] 프로젝트 이름으로 바꾸십시오.
git clone https://github.com/adorade/startit.git [your-project]폴더로 이동하십시오.
cd [your-project]종속성 설치 :
yarn install 호환성을 보장하기 위해 모듈 버전이 수정되었습니다. yarn outdated 실행하고 필요에 따라 package.json 업데이트하십시오.
사용을 시작하려면 선택한 유일한 일은 Code and Code의 코드 편집기에서 프로젝트를 열는 것입니다. 모든 변경 사항을 편집하고 실시간으로 미리보기 위해 도움이되는 명령이 있습니다. 다음은 알아야 할 명령 목록입니다.
gulp cleaner 또는 gulp build 와 같은 Gulp 명령을 사용하여 프로젝트의 루트 디렉토리에서 모든 명령을 실행해야합니다.
| 일 | 설명 |
|---|---|
| 청소기 | 컴파일 된 모든 파일을 제거하십시오 |
| 린터 | 보풀 스타일, 스크립트 및 퍼그 파일 |
| 스타일 | Sass 스타일을 컴파일하십시오 |
| 스크립트 | JavaScript 파일을 컴파일하십시오 |
| 글꼴 | 사본 글꼴 |
| 정적 | 정적 파일을 복사하십시오 |
| 이미지 | 이미지를 최적화하십시오 |
| 페이지 | 퍼그 템플릿을 컴파일하십시오 |
| 제공하다 | 서버를 시작하고 변경 사항을 확인하십시오 |
| 짓다 | 프로젝트를 구축하십시오 |
| 데브 | 변경 사항을 찾아보십시오 |
| 배포 | GitHub 페이지에 파일을 배포합니다 |
| 풀어 주다 | Github에 릴리스를 게시하십시오 |
| 기본 | 기본 gulp 작업 |
| 체크 무늬 | Gulp 구성을 확인하십시오 |
| 돕다 | 인쇄 도움말 메시지 |
gulp --tasks 실행하여 사용 가능한 모든 Gulp 작업을 볼 수 있습니다.
개발중인 경우 gulp dev 명령이 최선의 선택입니다. 콘솔의 프로젝트 폴더로 이동하여 gulp dev 실행하면 프로젝트를 컴파일하고 코드에서 무언가를 변경할 때마다 새로 고침 할 서버를 시작합니다.
Gulp는 변경 사항을 지켜보고 있으며 지역 및 공공 URL에서 프로젝트에 액세스하는 방법을 알려줍니다.
해당 URL을 가리키는 모든 브라우저는 자동 새로 고침됩니다. 테스트 목적을위한 추가 기능으로서 한 브라우저의 상호 작용은 다른 브라우저에 반영됩니다. 전화, 태블릿 및 PC에서 동시에 시도하십시오.
이 프로젝트는 매우 간단하고 유연한 구조를 가지고 있습니다. 파일 또는 디렉토리의 기본 장소를 이동 해야하는 경우 tool/util/config.js 파일의 새 위치로 업데이트하십시오.
├── dist - > All the compiled files will be placed here (Production)
├── logs - > Logs files
├── src - > Source files for the project
│ ├── es6 - > Scripts
│ ├── fonts - > Fonts
│ ├── images - > Images
│ ├── scss - > Sass
│ ├── static - > Favicons...
│ ├── vendors - > Vendors folder for all the dependencies
│ └── views - > Templates directory for Pug files
├── test - > Tests Files
├── tmp - > All the compiled files will be placed here (Development)
├── tools - > Project tools and configuration
│ ├── build - > files for build
│ ├── tasks - > tasks files for gulp
│ └── util - > config and options for project
├── package.json - > NodeJS configuration file
├── gulpfile.esm.js - > Gulp tasks
├── README.md - > README
└── ... config files for packages dist 및 tmp 폴더의 모든 파일은 프로젝트가 컴파일 할 때 다른 작업에 의해 자동 생성됩니다. 컴파일 프로세스에서 변경 사항이 교체되므로 이러한 폴더에서 수동으로 파일을 수정하지 마십시오.
이 프로젝트에는 필요한 모든 구성 옵션이 필요합니다. 구성하려면 다음 파일을 편집하고 필요한 값을 변경해야합니다.
tool/util/banner.js 스크립트 및 스타일 파일 용 배너tool/util/config.js 프로젝트 구성tool/util/options.js 플러그인 옵션 각 변경 후에는 모든 것이 순서대로 진행되고 오류가 없는지 gulp checks 확인하십시오.
이 구성의 모든 측면은 옵션을 알 수 있도록 파일에 설명되어 있습니다.
라이브로드 개발 모드에서 실행 :
yarn run start
# or
gulp
# or
gulp dev 다른 장치에서 액세스하는 경우 http://localhost:1234/ 또는 External URL로 이동하십시오.
전체 작업 목록 찾기 :
gulp -T
# or
gulp -T --tasks-depth 0 NODE_ENV production 으로 설정하여 Gulp 작업이 최종 코드를 생성하고, 즉 파일을 조정하고, Sourcemap 생성을 비활성화합니다.
yarn run build
# or
gulp build --production OS에 따라 NODE_ENV 수동으로 production 으로 설정하십시오.
Linux/Mac OS :
NODE_ENV=production
gulp build (또는 인라인 NODE_ENV=production gulp build )
Windows PowerShell :
$ env: NODE_ENV = " production "
gulp buildWindows 레거시 명령 줄 :
set NODE_ENV = production
gulp build 프로젝트를 GitHub 페이지에 자동으로 배포하고 https://[your-username].github.io/[your-project-name] 에서 사용할 수 있도록합니다.
yarn run deploy
# or
gulp build --production && gulp deployGitHub 사용에 릴리스를 게시하려면 :
yarn run release
# or
gulp release이 프로젝트는 MIT 라이센스에 따라 라이센스가 부여됩니다