node.js를 설치하십시오
먼저 Node.js를 설치해야합니다. 일반적으로 설치 패키지를 다운로드하여 Node.js의 공식 웹 사이트에 설치하면됩니다. 그러나 나는 수치스럽게 실패했고 다음과 같은 오류가 나타났습니다.
그래서 나는 Brew Dafa로 변경했습니다.
Brew install nodejs
Gulp를 설치하십시오
Gulp는 node.js의 NPM 명령을 사용하여 설치됩니다.
NPM 설치 -글로벌 완프
그런 다음 프로젝트 디렉토리에 설치하십시오.
NPM 설치-사브 데브 방법
나는이 단계에 대해 매우 당황했다. 수년간의 경험을 통해 코더로서의 수년간의 경험을 통해 글로벌 설치가 설치 되더라도 사용할 위치를 이용할 수 있어야합니다. 그러나 Gulp는 분명히 그렇게 아닙니다. 프로젝트 디렉토리 에서이 단계를 수행하지 않으면 GULP 명령을 사용할 때 다음 오류가 표시됩니다.
… 지역 gulp는 찾을 수 없습니다…
… 달리기를 시도하십시오 : NPM Gulp 설치
마지막으로 프로젝트 디렉토리에서 GULP 명령을 실행하십시오. 다음 컨텐츠가 출력 인 경우 설치가 완료되었음을 의미합니다.
… gulpile이 발견되지 않았습니다
간단한 예
다음은 GULP를 사용하여 정적 웹 사이트 개발 서버를 구축하고 Live Rofform (Livereload) 기능을 지원합니다.
먼저 Livereload 용 브라우저 플러그인을 설치해야합니다. 플러그인 주소는 다음과 같습니다. http://livereload.com/extensions/는 Chrome, Firefox 및 Safari의 세 가지 주요 브라우저를 지원합니다. 플러그인이 설치되면 브라우저에 버튼이 나타납니다. 이 버튼에는 두 개의 상태가 있습니다. Solid Dots는 플러그인이 활성화되어 있음을 나타내고 중공 도트는 플러그인이 활성화되지 않았 음을 나타냅니다. 기억하는 것을 잊지 마십시오!
그런 다음 간단한 프로젝트 구조를 만듭니다.
./gulpfile.js./public/./public/index.html
Gulp 및 관련 구성 요소를 설치하려면 다음 명령을 사용하십시오.
NPM 설치--Save-DEV Gulp Gulp-Connect
Gulp-Connect는 정적 웹 서버 기능을 제공하고 Livereload 기능을 통합하는 Gulp 플러그인입니다.
다음으로 gulpfile.js 파일을 편집해야합니다. 내용은 다음과 같습니다.
var gulp = require ( 'gulp'), connect = require ( 'gulp-connect') gulp.task ( 'server', function () {connect.server ({root : 'public', livereload : true}}) gulp.task ( 'html', function (), gulp.src ( './ html (connectml)). gulp.task ( 'watch', function () {gulp.watch ([ './ public/*. html'], [ 'html'])})) gulp.task ( 'default', [ 'watch', 'server')마지막 으로이 웹 서버를 실행합니다.
꿀벌
브라우저를 열고 http : // localhost : 4000을 방문하십시오. 그런 다음 index.html 파일의 내용을 수정하고 저장하십시오. 정상적인 상황에서는 브라우저 쪽이 수정 된 컨텐츠를 자동으로 새로 고치고 표시해야합니다.
Gulp와 Grunt의 간단한 비교
예를 들어 보자
꿀꿀 거리는 소리:
sass : {dist : {옵션 : {style : 'expeded'}, 파일 : { 'dist/assets/css/main.css': 'src/styles/main.scs',}}, AutoPrefixer : {dist : {옵션 : {Browsers : [ 'last 2 버전', 'Safari 5', 'ie 8', 'ie 8', 'ie 8', 'safari 5' 12.1 ','iOS 6 ','Android 4 ']}, src :'dist/assets/css/main.css ', dest :'dist/assets/css/main.css '}}, grunt.registertask ('styles ', ['sass ','autoprefixer '];Grunt는 플러그인을 별도로 구성하고 소스 및 대상 경로를 지정해야합니다. 예를 들어, SASS 플러그인의 입력으로 아카이브를 입력하고 출력 결과를 저장합니다. AutoPRefixer를 설정할 때는 새 파일을 생성하려면 SASS의 출력을 입력으로 사용해야합니다. Gulp에서 동일한 구성을 살펴 보겠습니다.
Gulp :
gulp.task ( 'sass', function () {return gulp.src ( 'src/styles/main.scs') .pipe (sass ({style : 'compressed'})) .pipe (autoprefixer ( 'last 2 버전', 'Safari 5', 'IE 8', 'IE 9', '', '', '')), ',', '')). .pipe (gulp.dest ( 'dist/assets/css')});Gulp에서는 파일 만 입력하면됩니다. 플러그인 SASS 처리 후 플러그인 AutoPRefixer로 전달되고 파일이 얻어집니다. 이 프로세스는 시공 프로세스 속도를 높이고 읽기 및 쓰기 불필요한 파일을 제거하고 최종 파일 만 있으면됩니다.