gulpile 만 공유합니다-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

gulpile 만 공유합니다

Jennifer Aniston

Apr 13, 2025 am 10:00 AM

gulpile 만 공유합니다

이 사이트를 위해 설정 한 Gulp Processing은 경주 조건을 갖기 시작했습니다. 내 Watch 명령을 실행하고 일부 CSS를 변경했으며 처리는 때때로 처리 중에 정리해야 할 여분의 추가 파일 뒤에 남겨질 수 있습니다. 파일이 파일 시스템에 착륙하기 전에 정리 작업이 발생한 것처럼 (또는 무언가… 실제로 바닥에 도달하지 못했습니다).

그 버그의 세부 사항에 대해서는 절대 신경 쓰지 마십시오. 나는 3.x 대신 Gulp 4.x를 사용하기 위해 물건을 업그레이드하고 내장 Gulp.series 명령에서 물건을 실행하여 도움을 줄 것이라고 생각했습니다.

Gulp 4.x 를 얻는 것은 나를위한 여정의 도대체였습니다. 내 문제는 Gulp 4에 CLI 버전이 2.x를 필요로하는 반면 Gulp 3은 어떤 이유로 든 3.x 버전을 사용했다는 것입니다. 본질적으로 나는 버전을 다운 그레이드 해야했지만, 그렇게하기 위해 10 억 가지를 시도한 후에는 내 컴퓨터에 Cli 3.x의 고스트 버전이있는 것처럼 아무것도 작동하지 않는 것 같습니다.

나는 Savvier Command-Line 사람들이 나보다 더 빨리 이것을 쫓아 낼 수 있다고 확신하지만, 실행중인 명령 -v gulp는 Gulp가 설치된 곳의 파일 경로를 공개하여/usr/local/share/npm/bin/gulp가 나에게 수동으로 그것을 삭제하기 전에 수동으로 2.x로 다시 시작했습니다.

Gulp 4.x를 사용할 수 있으므로 Gulpfile.js를 더 작은 기능으로 다시 작성하여 각각 상당히 분리되어 있습니다. 이것의 대부분은이 사이트에서 내 설정에 매우 고유 하므로 일반적인 사용을위한 보일러 플레이트가 아닙니다. 나는 단지 출판하고 있기 때문에 내가 그것을 만들 때 참조하는 것이 도움이되었을 것입니다.

내 특정 gulpile이하는 일

스타일 주입 및 자동 반영을 위해 웹 서버 (BrowserSync)를 실행합니다.
올바른 파일에서 올바른 작업을 실행하고 위의 작업을 수행하기 위해 파일 감시자 (Native Gulp 기능)를 실행합니다.
CSS 처리
- sass> autoprefixer> 미니
- 템플릿에서 스타일 시트 캐시를 끊습니다 (예 :
- Style.css를 WordPress 테마에 적합한 장소에 넣고 처리 중에만 필요한 파일 정리
자바 스크립트 처리
- 바벨> 컨 컨트레이트> 미니
- s의 브라우저 캐시를 중단하십시오
- 처리시 생성 된 사용되지 않은 파일을 정리하십시오
SVG 처리
- SVG 스프라이트 ( s의 블록을 만드십시오
- sprite.php 파일로 이름을 지정하고 (템플릿에 php로 클루할 수 있음) 특정 어딘가에 넣으십시오.
PHP 처리
- 광고가 변경 될 때 JavaScript의 Ajax 호출을 캐시 버스트로 업데이트하십시오.

코드 덤프!

 const gulp = 요구 ( "gulp"),
  browsersync = require ( "browser-sync"). create (),
  sass = require ( "gulp-sass"),
  postcss = require ( "gulp-postcss"),
  autopRefixer = require ( "autopRefixer"),
  cssnano = require ( "cssnano"),
  del = require ( "del"),
  babel = require ( "gulp-babel"),
  minify = require ( "gulp-minify"),
  concat = require ( "gulp-concat"),
  Rename = 요구 사항 ( "Gulp-Rename"),
  replace = require ( "gulp-replace"),
  svgsymbols = require ( "gulp-svg-symbols"),
  svgmin = 요구 사항 ( "gulp-svgmin");

const paths = {
  스타일 : {
    src : [ "./scss/*.scss", "./art-direction/*.scss"],
    DEST : "./css/"
  },
  스크립트 : {
    src : [ "./js/*.js", "./js/libs/* js", "! ./ js/min/*. js"],
    DEST : "./js/min"
  },
  SVG : {
    SRC : "./icons/* .svg"
  },
  PHP : {
    src : [ "./*.php", "./ads/*.php", "./art-direction/* .php", "./parts/**/*.php"]
  },
  광고 : {
    SRC : "./ads/* .php"
  }
};

/ * 스타일 */
함수 dostyles (완료) {
  gulp.series (스타일, movemainstyle, deleteoldmainstyle, done => {
    CACHEBUST ( "./ header.php", "./");
    완료();
  })(완료);
}

기능 스타일 () {
  Gulp를 반환합니다
    .Src (paths.styles.src)
    .pipe (sass ())
    .on ( "오류", sass.logerror)
    .pipe (postcss ([autoprefixer (), cssnano ()]))
    .pipe (gulp.dest (paths.styles.dest))
    .pipe (browsersync.stream ());
}

함수 movemainstyle () {
  gulp.src ( "./ css/style.css"). 파이프 (gulp.dest ( "./"));
}

함수 deleteoldMainStyle () {
  return del ( "./ css/style.css");
}
/ * 끝 스타일 */

/ * 스크립트 */
함수 doscripts (완료) {
  gulp.series 반환 (
    사전 처리,
    concatjs,
    Minifyjs,
    deleteartifactjs,
    다시로드,
    완료 => {
      CACHEBUST ( "./ parts/footer-scripts.php", "./parts/");
      완료();
    }
  )(완료);
}

함수 preprocessjs () {
  Gulp를 반환합니다
    .src (paths.scripts.src)
    .파이프(
      바벨({
        사전 설정 : [ "@babel/env"],
        플러그인 : [ "@babel/plugin-proposal class-class-class-class-properties"]
      })
    ))
    .pipe (gulp.dest ( "./ js/babel/"));
}

함수 concatjs () {
  Gulp를 반환합니다
    .Src ([
      "JS/libs/jquery.lazy.js",
      "JS/libs/jquery.fitvids.js",
      "JS/libs/jQuery.resizable.js",
      "JS/Libs/Prism.js",
      "JS/Babel/Highlighting-Fixes.js",
      "JS/Babel/Global.js"
    ])))
    .pipe (concat ( "global-concat.js"))
    .pipe (gulp.dest ( "./ js/concat/"));
}

함수 minifyjs () {
  Gulp를 반환합니다
    .src ([ "./ js/babel/*. js", "./js/concat/* .js"]))))
    .파이프(
      작게 하다({
        내선 : {
          SRC : ".js",
          민 : ".min.js"
        }
      })
    ))
    .pipe (gulp.dest (paths.scripts.dest));
}

함수 deleteartifactjs () {
  return del ([
    "./js/babel",
    "./js/concat",
    "./js/min/*.js",
    "! ./ js/min/*. min.js"
  ]);
}
/ * 엔드 스크립트 */

/ * svg */
함수 dosvg () {
  Gulp를 반환합니다
    .SRC (Paths.svg.src)
    .pipe (svgmin ())
    .파이프(
      svgsymbols ({
        템플릿 : [ "Default-SVG"],
        svgattrs : {
          너비 : 0,
          높이 : 0,
          디스플레이 : "없음"
        }
      })
    ))
    .pipe (이름 바꾸기 ( "아이콘/스프라이트/아이콘 .php"))
    .pipe (gulp.dest ( "./"));
}
/ * 종료 svg */

/ * 일반적인 것 */
기능 캐시 버스트 (SRC, DEST) {
  var cbstring = new date (). gettime ();
  Gulp를 반환합니다
    .SRC (SRC)
    .파이프(
      대체 ( /cache_bust = \ d /g, function () {
        "CACHE_BUST ="CBSTRING을 반환합니다.
      })
    ))
    .pipe (gulp.dest (dest));
}

함수 Reload (완료) {
  Browsersync.reload ();
  완료();
}

기능 Watch () {
  browsersync.init ({
    프록시 : "csstricks.local"
  });
  gulp.watch (paths.styles.src, dostyles);
  gulp.watch (paths.scripts.src, doscripts);
  gulp.watch (paths.svg.src, dosvg);
  gulp.watch (paths.php.src, Reload);
  gulp.watch (paths.ads.src, done => {
    CACHEBUST ( "./ js/global.js", "./js/");
    완료();
  });
}

gulp.task ( "기본", 시계);