gulp plate 다운로드 - gulp plate 소스 코드 다운로드

gulp plate

기타 카테고리

1.0.0

다운로드

걸프 플레이트

Gulp 상용구 및 빌드 시스템.

다음 도구, 작업 및 워크플로가 포함됩니다.

JavaScript 모듈 번들러로서의 Webpack
실시간 재로딩을 위한 webpack-dev-middleware (개발 중 더 빠른 재구축을 위한 메모리 컴파일에서)
Babel로 변환된 ES2015 구문
JavaScript 린팅을 위한 ESLint
JavaScript 코드 형식 지정에 더 적합
libsass, 소스 맵, autoprefixer 및 Sass Linting으로 컴파일된 SASS
라이브 재로딩 및 정적 서버를 위한 BrowserSync
SVG 압축을 위한 svgo.
gulp-svg-symbols는 <symbol> 및 <use> 태그가 있는 SVG 아이콘 스프라이트를 생성합니다.

SilverStripe 버전을 찾고 계십니까? 여기를 보세요.

종속성/설치

Gulp-plate는 다음 기술에 따라 달라집니다.

gulp를 위한 로컬 호스트 환경인 node.js(v. 7.5.0 이상) [1]
작업 실행자로 꿀꺽
종속성 관리자로서의 원사

[1] node trough nvm(Node Version Manager) 설치를 권장합니다.

시작하려면:

$ git clone https://github.com/arillo/gulp-plate myProject
$ cd myProject
$ rm -r .git    # Remove the link to the git repo
$ yarn          # Install dependencies

명령

 # Equivalent
$ yarn run build

기본 작업을 실행하고 dist 폴더에 사이트의 개발 버전을 생성합니다.

 # Equivalent
$ yarn start
$ yarn run watch

기본 작업을 한 번 실행하고 서버를 시작한 다음 파일 변경 사항을 감시합니다.

 # Equivalent
$ yarn run prod

NODE_ENV='production' 으로 설정하고 js, css 및 html을 압축하여 사이트의 프로덕션 버전을 생성합니다. 이것은 서버에 있어야 하는 폴더입니다.

다른 gulp 작업을 실행하려면 build /gulp 명령에 작업 이름을 추가하면 됩니다.

 # Equivalent
$ yarn run build sprite
$ yarn run b sprite
$ yarn run gulp sprite
$ yarn run g sprite

중요한:

dist 디렉토리는 build / watch / prod를 실행할 때마다 삭제됩니다. dist 디렉터리를 변경하지 마세요.

폴더 구조

myProject/
  gulpfile.js/  # gulp tasks
  src/
    icons/      # SVG files to be included in he the sprite
    images/     # other images
    js/         # js code
    sass/       # Sass code, SCSS and Sass indented syntax possible
    html/       # html templates
      data/     # data in json format
      layouts/  # reusable layout templates
      macros/   # Nunjucks macros
      shared/   # reusable snippets

구성

모든 경로와 플러그인 설정은 중앙 집중식 파일인 ./gulpfile.js/config.js 로 추상화되었습니다. 프로젝트의 구조와 요구 사항에 맞게 경로와 설정을 조정하세요.

SVG 스프라이트 구성

스프라이트는 ./dist/images/ 에 sprite.svg 라는 이름의 이미지를 생성합니다. 또한 ./src/sass/base/ 에 _sprite.scss 라는 Sass 파일을 생성합니다.

생성된 Sass 파일에는 각 아이콘의 크기와 같은 스프라이트 아이콘에 대한 유용한 정보가 포함되어 있습니다. 아이콘이 추가, 제거 또는 변경될 때마다 파일이 변경되므로 수동으로 편집하지 마십시오. ./gulpfile.js/tpl/_sprite.scss 에서 템플릿을 변경하여 파일을 변경할 수 있습니다.

정적 자산

변형 없이 소스 디렉터리에서 정적 자산(예: 글꼴 파일)을 이동합니다. config.js 의 static 배열에 src 및 dest 경로를 추가하세요.

HTML 템플릿

템플릿은 Nunjucks를 사용합니다. 사용 방법에 대한 자세한 내용은 문서를 참조하세요.

사스

Sass 들여쓰기 구문이 기본적으로 사용됩니다. 기본 Sass 파일에는 .sass 확장자가 있어야 합니다. 그렇지 않으면 컴파일러가 실패합니다. 부분 파일은 .sass 및 .scss 일 수 있습니다.

외부 공급업체 CSS 파일 포함

CSS에 타사 스타일을 포함하려면 main.sass 파일에 포함하세요.

 // main.sass

@import url( ' ../../node_modules/normalize.css/normalize.css ' ) ;

그런 다음 postcss 플러그인은 소스 맵을 보존하는 파일을 인라인합니다. Sass 컴파일 이후.

Sass는 @import url(...) 문을 생성된 CSS 파일의 맨 위로 이동하므로 포함 위치와 관계없이 이러한 스타일은 항상 파일의 맨 위에 포함됩니다.

Sass-lint 오류

sass-lint 작성 시 빈 선택자를 만나면 실패합니다. 이것은 버그입니다. // 빈 선택기 뒤에 들여쓰기 주석을 추가하면 방지할 수 있습니다.

 .mySelector
  //

.mySelector_child
  text-align : center

자바스크립트

./gulpfile.js/config.js 파일에는 전체 웹팩 구성이 포함되어 있습니다( js 변수 참조). 필요에 따라 자유롭게 변경하세요. eslint babel-loader에 의존하므로 항상 babel-loader 있어야 한다는 점을 명심하세요.

실행 중인 작업에 따라 구성이 약간 변경됩니다. 감시 작업을 사용하면 Javascript 컴파일이 메모리에서 발생하므로 디스크에 파일이 기록되지 않으며( ./dist/js/ 는 비어 있음) webpack-hot-middleware/client 작동하도록 실시간 다시 로드를 위해 모든 번들에 삽입됩니다. . 프로덕션용으로 빌드할 때 webpack.optimize.UglifyJsPlugin 축소에 사용됩니다. ./gulpfile.js/util/getWebpackConfig.js 를 살펴보고 정확히 무슨 일이 일어나고 있는지 확인하고 필요에 따라 변경하세요.

다음은 시작하고 실행하는 데 도움이 되는 몇 가지 유용한 방법입니다.

자주 필요한 파일에 대한 별칭 선언

 // gulpfile.js/config.js

const js = {
  resolve : {
    extensions : [ '.js' ] ,
    alias : {
      // Path relative to `context`
      myModule : './myModule/myModule.js' ,
    } ,
  } ,
} ;

 // src/js/some-file.js

import myModule from 'myModule' ;

myModule ( ) ;

문서: https://webpack.js.org/configuration/resolve/#resolve-alias

CommonJs가 아닌 모듈 시밍

jQuery 플러그인

 // gulpfile.js/config.js

const webpack = require ( 'webpack' ) ;
//...
const js = {
  plugins : [
    // Make jQuery global, expected by the plugin.
    new webpack . ProvidePlugin ( {
      'window.jQuery' : 'jquery' ,
    } ) ,
  ] ,
  //...
  resolve : {
    // Add extensions to prevent linting errors.
    extensions : [ '.js' , '.json' ] ,
    // Path from `node_modules`, where `myModule` is the module name.
    alias : {
      myModule : 'myModule/dist/myModule.js' ,
    } ,
  } ,
} ;

 // src/js/main.js

import $ from 'jquery' ;
import 'myModule' ;

$ ( '.js-selector' ) . myModule ( ) ;

일반 JavaScript 모듈

 // gulpfile.js/config.js

const js = {
  //...
  resolve : {
    // Add extensions to prevent linting errors.
    extensions : [ '.js' , '.json' ] ,
    // Path from `node_modules`, where `myModule` is the module name.
    alias : {
      myModule : 'myModule/dist/myModule.js' ,
    } ,
  } ,
  module : {
    rules : [
      // ...
      {
        include : require . resolve ( 'myModule/dist/myModule.js' ) ,
        loader : 'exports-loader?MyModule' ,
      } ,
    ] ,
  } ,
} ;

 // src/js/main.js

import $ from 'jquery' ;
import MyModule from 'myModule' ;

const myInstance = new MyModule ( ) ;

문서: https://webpack.js.org/guides/shimming/

여러 JavaScript 번들 및 공급업체 코드 공유

여러 번들을 생성하려면 entry 에 전체를 추가하세요.

 // gulpfile.js/config.js

const js = {
  // ...
  entry : {
    main : [ './main.js' ] ,
    other : [ './someFile.js' , './sotherOtherFile.js' ] ,
  } ,
  // ...
} ;

그러면 main.js 와 other.js 두 개의 번들이 생성됩니다.

이렇게 하면 공유 공급업체 코드를 모두 포함하는 다른 번들을 생성하는 것이 좋습니다.

 // gulpfile.js/config.js

const webpack = require ( 'webpack' ) ;
//...
const js = {
  // ...
  entry : {
    main : [ './main.js' ] ,
    other : [ './someFile.js' , './sotherOtherFile.js' ] ,
    // List vendor modules here:
    vendor : [ 'jquery' , 'svg4everybody' ] ,
  } ,
  // ...
  plugins : [
    new webpack . optimize . CommonsChunkPlugin ( {
      name : 'vendor' , // Specify the common bundle's name
    } ) ,
  ] ,
  // ...
} ;