gulp
Gulpjs를 사용한 프론트 엔드 워크 플로우 종합 가이드 2의 2

비고

브라우저 동기화 설정 및 스타일 및 스크립트에 대한 감시자 구성

노트

이 페이지는 browser-sync, gulp-watch 및 run-sequence와 같은 gulp 플러그인 사용을 설명 하고 Gulpjs-workflow-automation-1에서 중단 한 곳에서 gulp-workflow-automation을 계속 논의 합니다. 여기에 도착한 경우, 먼저 해당 게시물을 검토해보십시오 .

• 기본 작업
• 워치 독 태스크 - 이미지가 생성 될 때마다 즉시 배치 준비 자산을 즉각적으로 구축하십시오. JS | CSS는 개발 ​​과정에서 변경됩니다.

브라우저 동기화로 시작합시다.

Gulp Watchdog Task

워치 독 작업부터 시작하겠습니다.

목표는 개발하는 동안 변경 사항을 감시하는 것입니다. 모든 변경 사항은 해당 꿀꺽 꿀꺽함 작업을 트리거해야합니다.

또한 브라우저에서 변경 사항을 동기화하는 기능이 필요합니다.

브라우저 동기화

따라서 브라우저 동기화를 설치해야합니다.

bash $ npm install browser-sync --save-dev

그런 전제하에 gulpfile.js를 열고 시계 기능을 추가하십시오. 브라우저 동기화를 요구하고 기능을 사용하기 위해 일부 변수를 정의하겠습니다.

gulpfile 상단에 아래 스 니펫을 추가하십시오. 이미지 압축 선언 바로 아래에 배치하십시오.

이렇게 :

//Browser-sync

var sync = require('browser-sync').create();
var reload = sync.reload;

브라우저 동기화를 통해 개발을 브라우저에 동기화하면 간단한 구성이 가능합니다. 워치 독이라고하는 작업을 만들어 보겠습니다.

이렇게 :

$.task('watchdog', function() {


})

이제 여기서 브라우저 동기화 옵션을 탐색하고 서버 설정을 검색하면 얼마나 쉬운 지 알 수 있습니다.

워치 독 작업의 아래쪽에 배치하면됩니다.

발췌 문장 - 1 - 내부 워치 독 정언

/*
 Initiate Browser sync
 @documentation - https://www.browsersync.io/docs/options/
 */
 sync.init({
  server: {
    baseDir: "./"
 },
 port: 8000 //change it as required
 });

위의 watchdog 상용구의 위 부분을 삽입하십시오.

다음 스 니펫은 CSS 파일이나 새 CSS 파일을 다시 처리하고 브라우저가 자동으로 다시로드되도록 목표를 설정하여 스타일에 대한 감시자를 정의하는 것입니다.

발췌 문장 - 2 - 내부 워치 독 정언

$.watch(['css/**/*', 'fonts/google/**/*.css'], reload).on('change', function(event) {
console.log(event.type + ':' + event.path)
if (event.type === 'deleted') {
uncache('styles', event.path);
$$.remember.forget('auto-prefixed-stylesheets', event.path);
}
sequence('optimizeStyles')
});

위의 watchdog 상용구의 위 부분을 삽입하십시오.

그래서 우리는 " [fonts/google/**/*.css , /**/*.css ]" 즉,

css 아래에있는 모든 css 파일 / fonts / google /에있는 모든 css 파일 변경되거나 새로운 파일이 추가되면 gulpfile의 맨 위에 정의 된 reload 메소드가 browsersync 선언에 트리거됩니다.

참고 : watcher에 .on 이벤트 처리기가 연결되어 있음을 알 수 있습니다.

$.watch(['css/**/*', 'fonts/google/**/*.css'], reload).on('change', function(event) 

기본적으로 CUD (Create | Update | Delete)는 reload 함수를 트리거하고 이벤트 객체를 매개 변수로 콜백 함수에 전달합니다.

콜백은 자산 삭제시 uncache와 같은 작업을 수행 할 수있는 중요한 기능입니다. 이제는 이벤트 객체에 다음과 같은 매개 변수가 있습니다.

• 통로
• 유형 - 생성 / 업데이트 / 삭제

자산이 삭제되면 gulp-cached 및 gulp-remember를 통해 이전 축소 기능에서 만든 캐시에 업데이트가 필요한지 확인해야합니다.

우리는 아래 콜백 변경 내용을 처리 중입니다.

if (event.type === 'deleted') { 
uncache('styles', event.path);
$$.remember.forget('auto-prefixed-stylesheets', event.path);  
}

노트

꿀꺽 꿀꺽 마시는 $ -> 별칭

gulp-load-plugins의 $$ -> 별칭

당신은 또한 내가 sequence('optimizeStyles'); 가지고 있다는 것을 알 수있다 sequence('optimizeStyles'); uncache 호출을 작성한 후

시퀀스 메소드는 동기 메소드가 기본적으로 비동기로 실행되도록합니다.

설치가 간단하다.

해야 할 것

bash $ npm install run-sequence

그런 다음 브라우저 동기화 선언 바로 아래 gulpfile에 선언하십시오.

var sequence = require('run-sequence');

이러한 이해로 스크립트 작성자는 쉽게 작성할 수 있습니다. 그냥 다른 globs!

따라서 watchdog 상용구 내부의 스타일 감시자 아래에이 스 니펫을 추가하십시오.

스 니펫 - 3 - 워치 독 작업 표준 정차 내부

/*
on addition or change or deletion of a file in the watched directories
the change event is triggered. An event object with properties like
path,
event-type
is available for perusal passed to the callback

*/
$.watch('js/**/*', reload).on('change', function(event) {
console.log(event.type + ':' + event.path)
if (event.type === 'deleted') {
uncache('scripts', event.path);
$$.remember.forget('linted-scripts', event.path);
}
sequence('optimizeScripts');
});

노트

우리는 위의 스 니펫에서 두 가지 기능을 사용했습니다.

• uncache
• $$. remember.forget 참고 :

$ -> 꿀꺽 꿀꺽하는 별칭

$$ -> gulp-load-plugins의 별칭

호출되기 전에 우리의 gulpfile.js 어딘가에 함수 uncache를 정의하겠습니다.

/*
Deletes a cache entry
*/
var uncache = function(cacheName, cacheKey) {
        var cache = $$.cached;
        if (cache.caches[cacheName] && cache.caches[cacheName][cacheKey])
            return delete cache.caches[cacheName][cacheKey];
        return false;
    }
    /*
    logs current cache created via gulp-cached
    */
var viewCache = function() {
    console.log($$.cached.caches)
}

기본 작업 정의

이제 Default 작업을 정의하여 gulpfile 코드를 완성 해 보겠습니다.

기본 작업은 실행중인 작업입니다.

gulp

프로젝트의 루트 아래에있는 명령 프롬프트에서.

$.task('default', ['generateResponsiveImages'], function() {
 $.start('watchdog');
 console.log('Starting Incremental Build');
});