gulp Grunt 및 Gulp 실행을 WebStorm UI에서 관리하는 방법 Grunt와 Gulp 작업은 기본적으로 명령 줄을 사용하여 수행됩니다. 그러나 IDE 을 사용하면 UI에서 쉽게 작업을 실행, 중지 및 다시 시작할 수 있습니다. 프로젝트가 엄청나게 커짐에 따라 작업의 양도 증가합니다. WebStorm의 UI를 사용하면 어떤 태스크가 등록되어 있는지 알기 쉽고 관리하기 쉬워집니다. 또, 커맨드 라인에 희미한 팀 멤버가 있는 경우도, Gulp의 환경 구축만 할... 작업 러너gruntWebStormgulp 작업 러너 빈 템플릿 (Grunt · Gulp) WEB 사이트제작 태스크 러너의 빈 템플릿을 만들었습니다. 라고 하는 것을 이전 만들었습니다만 이번은 구체적인 컴파일용 플러그인은 포함하지 않고 아래 태스크 러너 플로우를 Grunt·Gulp 양쪽에서 구현했습니다. 디렉토리 설명 _release 납품용 deploy 개발용 libs 라이브러리 등 두는 곳(ex. libs/js/jquery-1.11.3.min.js ) src 컴파일 전 데이터 등... gruntgulp 이제 들리지 않는 프런트 엔드 작업 러너 프런트 엔드 엔지니어가 되었기 때문에 소문에 듣는 태스크 러너가되는 것에 입문하려고 여러가지 검토하고 있습니다. 조사하고 있는 느낌으로는 이하의 2강인 것이므로, 지금 갱감이 감도는 가운데 소개하고 싶습니다. 클래식한 것이 Grunt. 프런트 엔드에서의 태스크 러너라고 하면 이것이 제일 유명한 것 같네요. Sass 컴파일, CSS, JavaScript 결합, 압축 등 다양한 것을 자동화할 수... gruntgulp 【nuxt.js】S3・CloudFront 구성 CodeBuild에서의 배포 자동화 Nuxt.js에서 만든 프로젝트를 gulp, CodeBuild를 사용하여 자동 배포하는 단계를 요약합니다. 아래 URL을 참고하여 CodeBuild 설정을 변경하고 있습니다. yarn 명령을 사용할 수 있도록 한다 yarn add gulp 이번에는 로컬 환경에 yarn을 사용하여 설치 gulpfile에서 사용하는 모듈 추가 yarn add gulp-awspublishyarn add gulp-... nuxt.jsgulpCodeBuildCodePipelineAWS Gulp에서의 환경 구축 정리～Pug/Sass/TypeScript/BrowserSync～ 프런트 엔드의 개발을 할 때, 가능한 한 현장에 가까운 환경을 구축해 개발하고 싶다고 생각했기 때문에 정리했습니다. ← 공개하고 있습니다. 사용하는 경우 아래와 조합하면 비교적 환경 구축은 OK! (라고 생각하고 싶다.) ※windows로 환경 구축하고 있습니다. ✅참고 각 플러그인에 대해 정리해 준다. 개요 잡는다. ※실제로 환경 구축할 때까지는 흠뻑 빠졌습니다. ✅ 개요 이번에는 이하의 ... pugBrowserSyncTypeScriptgulpSass 2021년 gulp-sass를 설치하려고 망설였다 이번 완전히 신규 코딩 이슈에 종사하게 되었기 때문에, 오랜만에 1년 전까지 사용하고 있던 package.json을 끌어내고 npm intall 했다. 3시간 조사하거나 고민했던 결과, 해결했으므로 비망록으로 남깁니다. Windows10 환경에서 npm install gulp-sass --save-dev 그러면 아래와 같이 로그가 출력되어 설치할 수 없다. 나의 PC에는 Node.js의 【최... gulp-sassNode.jsnpmgulpnode-sass EJS의 if문으로 true일 때만 출력한다. 위와 같은 값이있을 때만 출력하는 설명을 스마트하게 작성하고 싶습니다. <%가 많기 때문에 줄이고 싶습니다. 다음과 같이 쓰면 완결에 쓸 수 있습니다. 삼항 연산자를 사용합니다. 가짜 값의 경우 빈 문자입니다. 가짜 값을 생략할 수 없는 것이 마음 남아 있지만, 결론 <%= person.name ? person.name : '' %> 간단합니다. 다른 좋은 방법이 있으면 알려주세요... npm자바스크립트gulpejsNode.js 초보자가 웹 스타터 키트를 사용하려고 했던 것을 공유하고 싶습니다. 이제 React를 알고 공부를 시작해 3개월째의 초보자입니다. 언제나처럼 여유 시간에 구구하고 있으면 "web-starter-kit"라는 구글 제의 편지지가 있다는 것을 알았습니다. 절대적인 구글 추종자의 저는 하나님 (구글)이 권고하는 것을 사용하지 않을 것입니다. 에는 누구라도 간단하게 할 수 있게 써 있기 때문에 즉각 핥아 걸렸습니다. 그러나 실제로 해보면. 이 커맨드가 움직일 때까지 ... npmgulpboilerplate초보자google gulp로 Sass를 좋은 느낌으로 컴파일 「이 기사를 보면 gulp로 좋은 느낌으로 Sass를 CSS에 컴파일 할 수 있다!」라고 하는 기사입니다. 이전 이라는 기사를 집필했지만, 환경 구축을 실시해,Sass를 CSS에 컴파일 하는 것만의 기본적인 내용이었습니다. 이 기사에서 좀 더 자세히 설명합니다. 참고가되면 꼭 LGTM을 부탁드립니다! 환경 구축의 방법에 대해서는, 이전 라고 하는 기사를 집필하고 있으므로, 그쪽을 참고로 해 ... 프런트 엔드npmgulpNode.jsSass gulp 도입부터 실행까지 빠져서 메모 첫 기사 업데이트. 직장에서 gulp를 도입할 때 빠졌기 때문에 자신을 위해 메모. homebrew nodebrew는 설치됨 여기 참고로했습니다. 감사합니다 비밀번호를 입력하여 버전 확인 됐어(⌒▽⌒) 일단 모두 yes로 진행했다 실행해보기 모듈이 없다고 화가났다. 넣었다! 한 번 더 실행해 봅시다. 오류가 발생했습니다. 조사해 보면 gulp의 버전 4에서 변경점이있는 것 같습니다. 여기에 ... 프런트 엔드npmgulpnodebrewNode.js gulp Typetalk 알림 플러그인을 만든 이야기 gulp 의 Typetalk 통지 플러그인 를 만들었으므로 소개하는 기사입니다. Typetalk 란 무엇입니까? 그렇다면 gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something. Node.... Typetalkgulp 【비엔지니어라도 copipe로 바로 사용할 수 있다】 화상의 압축 기능 Github에서 복제한 경우의 단계 node등의 환경 구축이 이미 되어 있으면 아래의 3스텝으로 화상 압축을 할 수 있습니다 1. 복제 (URL이 변경되면 Github에서 복제하십시오) 2.nodemodule 설치 3. 실행 아래의 1~11의 커맨드를 실행하면 화상의 압축을 곧바로 할 수 있게 됩니다 직접 도입 할 때 gulp과 imagemin을 조사하거나 힘들었기 때문에 코피페만으로 사용할... 자바스크립트gulppngquantNode.jsimagemin 지금은 BrowserSync가 굉장히 편리하다. 기본적인 것 밖에 쓰지 않기 때문에, BrowserSync 사용한 적이 없는 방향입니다. 지금까지 아무것도 생각하지 않고 webpack-dev-server를 사용하고 있었습니다만, 조금 기분 전환이 엄청나게 BrowserSync를 시험해 보면, 감동의 기능이 막혀 있었으므로, 각서 김에 여기에 써 남깁니다. 이것입니다. 로컬 서버를 시작하고 파일 변경에 따라 자동으로 리로드를 해주는 도구입니... BrowserSyncnpm자바스크립트gulpNode.js Electron & Gulp 환경에서 Watch하고 LiveReload 느낌을 할 때 빠졌기 때문에 메모 취미로 프로그래밍을 접하고 친구와 함께 팀 개발을 하고 있습니다만, Electron & Gulp 환경에서 라이브 로드 같은 일을 할 수 있으면 대단한 편이구나-라든지 가벼운 기분 해 보면 대단히 빠졌다 그래서 메모. dependencies 와 devDependencies 의 정리가 되어 있지 않기 때문에 구분적으로 정확하다고는 할 수 없습니다... Babel, SCSS/SASS, 파일 번들 ... Electron자바스크립트gulp 심볼릭 링크가있는 디렉토리에서 gulp watch하여 아픈 눈을 본 이야기 제목대로입니다. 아픈 눈을 보지 않도록 비망록도 겸해. 제목처럼 생각했을 때가 나에게도있었습니다 ( ˘ω˘) watch 대상의 디렉토리 구성은 이쪽 매우 간단한 구성입니다. gulpfile.js 이것을 npm에서 시작하여 test 부하를 watch 해 보았습니다. 변경이 있으면 패스를 표시할 뿐일 것입니다… touch 명령으로 업데이트 날짜와 시간을 다시 씁니다. 그런데, gulp의 watc... 심링크gulpdirectoryNode.js Node.js+gulp를 이용한 Sass 이용 환경 구축 Node.js와 gulp를 사용하여 Sass의 사용 환경을 로컬 PC에 구축했을 때의 절차를 비망록으로 작성합니다. 에서 설치 프로그램을 DL합니다. 설치 프로그램을 시작합니다. 계속을 누르십시오. 계속을 누르십시오. 설치를 누르십시오. 설치가 완료되면 닫기를 누르십시오. 터미널을 시작하고 다음 명령을 실행하여 Node.js가 설치되어 있는지 확인합니다.node -v Node.js 버전이 표... 자바스크립트gulpCSSNode.jsSass gulp + Babel 소개 비망록 개인적인 메모로서(정보가 오래되었을 가능성이 있으므로 참고로 할 때는 주의) node 설치 적절하게 디렉토리를 작성 명령 프롬프트를 시작하고 디렉터리로 이동 ( cd C:\gulp-test ) C:\gulp-test> npm init 여러가지 듣기 때문에 대답한다 (나중에 변경 가능하므로 모르면 Enter로 날려 OK) package.json이 만들어진다 gulp 글로벌 설치 C:\gulp-... babel자바스크립트gulp 무료 SVG 소재의 출처를 명시하기위한 gulp 플러그인을 만들었습니다. SVG 파일과 SVG 파일의 캡션을 작성한 텍스트 파일 (.txt)을 주면 위 이미지와 같은 정적 HTML을 생성합니다. 무료 SVG 소재의 대부분은 사용 조건으로 출처를 명시하는 것을 언급합니다. 정해진 저자의 SVG 소재 밖에 사용하지 않는다면, 바닥글에 그 저자에 대한 크레딧을 표시하는 것으로 대응할 수 있습니다만, 복수의 저자/사이트의 소재를 조합해 사용하는 경우, 상기의 방법에서는,... gulpplugingulpSVG autoprefixer 기본 대상 브라우저를 설정하면 필요/불필요한 벤더 접두사를 추가/삭제합니다. CSS 처리. Sass를 사용하는 경우 변환 후 사용 의 기능으로 작동 gulp에서 Sass와 함께 사용되는 샘플 설치 npm install gulp gulp-sass gulp-postcss autoprefixer --save-dev gulp gulpfile.babel.js 대상 브라우저 설정 .browserslistrc... SassCSSgulp docker로 blueprint 컨테이너를 사용해보십시오. API 인터페이스 사양서를 작성하는 툴로 편리한 것이 없는지 조사해 보았다. 조금 낡은 것 같지만, 우선 blueprint를 시험해 본다. 아래의 파일 구성으로 구축해 보았습니다. 파일 목록 컨테이너로서는 다음의 2개를 준비합니다. Blueprint 컨테이너 (Markdown을 html로 변환) Nginx 컨테이너 (브라우저에 HTML 스펙을 게시) Nginx는 공식 컨테이너를 사용하므로 생... docker-compose도커Blueprintgulp gulp + typescript에서 소스 맵이 vscode에 인식되지 않을 때의 확인 점 "확인되지 않은 중단 점 생성 된 코드를 찾을 수 없으므로 중단 점이 무시되었습니다 (소스 맵 문제?)" .vscode/launch.json 의 outFiles 속성 launch.json의 outFiles 속성 지정에 컴파일 후 js 파일이 포함되는 것이 중요합니다. program 속성에 속해 있는 파일은 outFiles 속성에 포함되지 않아도 소스 맵이 효과가 있으므로, index.js의 ... SourceMapTypeScriptgulpNode.jsVisualStudioCode 비엔지니어를 위한 최초의 Gulp 이 기사는 Gulp를 우선 사용하고 싶다! Gulp의 설정을 스스로 만들고 싶은 분은 대상외가 되기 때문에, 양해 바랍니다. ※node.js의 인스톨 방법등, 더 좋은 방법은 있습니다만, 프로그램을 쓰거나 터미널을 접하는 것에 익숙하지 않은 사람용이므로, 최저한의 방법으로 소개하겠습니다. 사용할 수 있도록 준비 1. node.js를 설치합니다. node.js는 에서 설치 프로그램을 다운로드합... gulpNode.js gulp gulp-eslint 설정 안건으로 gulp를 사용하고 있는 환경에 맞았으므로, eslint나 htmlhint 주위의 메인터넌스와 비망록gulp-eslint 등을 조사하면 과거의 기사가 히트하기 때문에 공식을 보면서 재검토해 간다 ※ .eslintrc 는 작성되고 있는 전제로 진행합니다 gulp-eslint 설치 사용하는 것은 이것만 다른 사이트에서 plumber 라든지 node-notifier 를 사용하고 있지만 사... ESLintgulp SCSS 컴파일 오류시 데스크톱 알림을 보내는 방법 gulp에서 SCSS 컴파일 할 때, 오류가 발생하여 처리가 불가능하다는 것을 깨닫지 못하는 경우가 많았기 때문에, 데스크톱 알림을 받으려고했습니다. "gulp-notify""node-notifier"두 개의 패키지를 사용해 보았으므로, 둘 다 함께 둡니다. gulp-notify 를 install gulpfile.js에 task 쓰기 gulpfile.js 오류 발생 scss 알림이 나왔다! ... gulp-notifynode-notifierscssgulp webpack의 도입을 최소 단위로 시도 은 JavaScript를 정리해 주는 모듈 번들러입니다. 왜 정리해야 하는가? 이는 한 번에 웹 서버와 통신할 수 있는 파일 수가 제한되어 있기 때문에 파일 크기가 작은 파일을 세밀하게 전송하는 것보다 큰 파일을 한 번에 전송하는 것이 효율이 좋기 때문입니다. 그렇다면 다른 도구도 실현 가능하지만, webpack의 경우는 표준 사양의 ES Modules를 사용할 수 있고 node_module... webpack자바스크립트es6gulp HTML 메일 제작 CSS Support Guide for Email Clients | Campaign Monitor oulook에 있어서는 height가 효과가 없다, margin도 요소에 따라서는 효과가 없다, 의사 요소나 position, float등도 물론 사용할 수 없다, 라고 하는 상황이므로, 테이블 코딩에서의 (경우에 따라서는 spacer를 사용하거나) 레이아웃 조정 필요 제약이 많다는 것을 미리 ... HTML 메일gulp Gulp with Raspberry Pi Gulp 알림에 Raspberry Pi L 치카를 사용하십시오 Gulp로 통지를 내고 싶을 때는 gulp-notify등이 사용된다고 생각합니다만, Raspberry Pi로 프런트 엔드 개발을 할 때 L치카로 대용할 수 없는가 하고 생각해 보기로 했습니다. Raspberry Pi 3 L 치카 키트 (LED, 저항, 듀폰 케이블, 브레드 보드) 다음은 Raspberry Pi에서 OS와 같은 설정... RaspberryPi자바스크립트gulpNode.js 【메모】middleman4x의 livereload 브라우저에 추가 기능을 추가합니다. 내가 Firefox Quantum에 추가 한 것은 LiveReload 2.1.0 by Todd Wolfson gulpfile.js 그리고는 터미널에서 gulp를 기동시킬 뿐. 그냥 middleman3x의 livereload와 비교하면 엄청 느립니다.... middlemangulp 스플래툰 2의 Chrome 확장을 만들어 보았다. ikaWidget2라든지 사용하고 있으면, 원하는 기어가 와도 놓치기 때문에 어떻게든 하려고 했다. 거기서 제일 시작해 하는 일이 많은 Chrome 확장(Chrome Extension)으로 기어의 확인＋통지를 만들어 보았다. 드디어 TypeScript 만지지 않고 사용해 보았다! 이 근처를 참고로 여러가지 보았다. 우선 알았던 것. manifest 파일＋HTML＋CSS＋JS로 만들 수 있다.... TypeScriptchrome-extensiongulpNode.jsSplatoon 이전 기사 보기
Grunt 및 Gulp 실행을 WebStorm UI에서 관리하는 방법 Grunt와 Gulp 작업은 기본적으로 명령 줄을 사용하여 수행됩니다. 그러나 IDE 을 사용하면 UI에서 쉽게 작업을 실행, 중지 및 다시 시작할 수 있습니다. 프로젝트가 엄청나게 커짐에 따라 작업의 양도 증가합니다. WebStorm의 UI를 사용하면 어떤 태스크가 등록되어 있는지 알기 쉽고 관리하기 쉬워집니다. 또, 커맨드 라인에 희미한 팀 멤버가 있는 경우도, Gulp의 환경 구축만 할... 작업 러너gruntWebStormgulp 작업 러너 빈 템플릿 (Grunt · Gulp) WEB 사이트제작 태스크 러너의 빈 템플릿을 만들었습니다. 라고 하는 것을 이전 만들었습니다만 이번은 구체적인 컴파일용 플러그인은 포함하지 않고 아래 태스크 러너 플로우를 Grunt·Gulp 양쪽에서 구현했습니다. 디렉토리 설명 _release 납품용 deploy 개발용 libs 라이브러리 등 두는 곳(ex. libs/js/jquery-1.11.3.min.js ) src 컴파일 전 데이터 등... gruntgulp 이제 들리지 않는 프런트 엔드 작업 러너 프런트 엔드 엔지니어가 되었기 때문에 소문에 듣는 태스크 러너가되는 것에 입문하려고 여러가지 검토하고 있습니다. 조사하고 있는 느낌으로는 이하의 2강인 것이므로, 지금 갱감이 감도는 가운데 소개하고 싶습니다. 클래식한 것이 Grunt. 프런트 엔드에서의 태스크 러너라고 하면 이것이 제일 유명한 것 같네요. Sass 컴파일, CSS, JavaScript 결합, 압축 등 다양한 것을 자동화할 수... gruntgulp 【nuxt.js】S3・CloudFront 구성 CodeBuild에서의 배포 자동화 Nuxt.js에서 만든 프로젝트를 gulp, CodeBuild를 사용하여 자동 배포하는 단계를 요약합니다. 아래 URL을 참고하여 CodeBuild 설정을 변경하고 있습니다. yarn 명령을 사용할 수 있도록 한다 yarn add gulp 이번에는 로컬 환경에 yarn을 사용하여 설치 gulpfile에서 사용하는 모듈 추가 yarn add gulp-awspublishyarn add gulp-... nuxt.jsgulpCodeBuildCodePipelineAWS Gulp에서의 환경 구축 정리～Pug/Sass/TypeScript/BrowserSync～ 프런트 엔드의 개발을 할 때, 가능한 한 현장에 가까운 환경을 구축해 개발하고 싶다고 생각했기 때문에 정리했습니다. ← 공개하고 있습니다. 사용하는 경우 아래와 조합하면 비교적 환경 구축은 OK! (라고 생각하고 싶다.) ※windows로 환경 구축하고 있습니다. ✅참고 각 플러그인에 대해 정리해 준다. 개요 잡는다. ※실제로 환경 구축할 때까지는 흠뻑 빠졌습니다. ✅ 개요 이번에는 이하의 ... pugBrowserSyncTypeScriptgulpSass 2021년 gulp-sass를 설치하려고 망설였다 이번 완전히 신규 코딩 이슈에 종사하게 되었기 때문에, 오랜만에 1년 전까지 사용하고 있던 package.json을 끌어내고 npm intall 했다. 3시간 조사하거나 고민했던 결과, 해결했으므로 비망록으로 남깁니다. Windows10 환경에서 npm install gulp-sass --save-dev 그러면 아래와 같이 로그가 출력되어 설치할 수 없다. 나의 PC에는 Node.js의 【최... gulp-sassNode.jsnpmgulpnode-sass EJS의 if문으로 true일 때만 출력한다. 위와 같은 값이있을 때만 출력하는 설명을 스마트하게 작성하고 싶습니다. <%가 많기 때문에 줄이고 싶습니다. 다음과 같이 쓰면 완결에 쓸 수 있습니다. 삼항 연산자를 사용합니다. 가짜 값의 경우 빈 문자입니다. 가짜 값을 생략할 수 없는 것이 마음 남아 있지만, 결론 <%= person.name ? person.name : '' %> 간단합니다. 다른 좋은 방법이 있으면 알려주세요... npm자바스크립트gulpejsNode.js 초보자가 웹 스타터 키트를 사용하려고 했던 것을 공유하고 싶습니다. 이제 React를 알고 공부를 시작해 3개월째의 초보자입니다. 언제나처럼 여유 시간에 구구하고 있으면 "web-starter-kit"라는 구글 제의 편지지가 있다는 것을 알았습니다. 절대적인 구글 추종자의 저는 하나님 (구글)이 권고하는 것을 사용하지 않을 것입니다. 에는 누구라도 간단하게 할 수 있게 써 있기 때문에 즉각 핥아 걸렸습니다. 그러나 실제로 해보면. 이 커맨드가 움직일 때까지 ... npmgulpboilerplate초보자google gulp로 Sass를 좋은 느낌으로 컴파일 「이 기사를 보면 gulp로 좋은 느낌으로 Sass를 CSS에 컴파일 할 수 있다!」라고 하는 기사입니다. 이전 이라는 기사를 집필했지만, 환경 구축을 실시해,Sass를 CSS에 컴파일 하는 것만의 기본적인 내용이었습니다. 이 기사에서 좀 더 자세히 설명합니다. 참고가되면 꼭 LGTM을 부탁드립니다! 환경 구축의 방법에 대해서는, 이전 라고 하는 기사를 집필하고 있으므로, 그쪽을 참고로 해 ... 프런트 엔드npmgulpNode.jsSass gulp 도입부터 실행까지 빠져서 메모 첫 기사 업데이트. 직장에서 gulp를 도입할 때 빠졌기 때문에 자신을 위해 메모. homebrew nodebrew는 설치됨 여기 참고로했습니다. 감사합니다 비밀번호를 입력하여 버전 확인 됐어(⌒▽⌒) 일단 모두 yes로 진행했다 실행해보기 모듈이 없다고 화가났다. 넣었다! 한 번 더 실행해 봅시다. 오류가 발생했습니다. 조사해 보면 gulp의 버전 4에서 변경점이있는 것 같습니다. 여기에 ... 프런트 엔드npmgulpnodebrewNode.js gulp Typetalk 알림 플러그인을 만든 이야기 gulp 의 Typetalk 통지 플러그인 를 만들었으므로 소개하는 기사입니다. Typetalk 란 무엇입니까? 그렇다면 gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something. Node.... Typetalkgulp 【비엔지니어라도 copipe로 바로 사용할 수 있다】 화상의 압축 기능 Github에서 복제한 경우의 단계 node등의 환경 구축이 이미 되어 있으면 아래의 3스텝으로 화상 압축을 할 수 있습니다 1. 복제 (URL이 변경되면 Github에서 복제하십시오) 2.nodemodule 설치 3. 실행 아래의 1~11의 커맨드를 실행하면 화상의 압축을 곧바로 할 수 있게 됩니다 직접 도입 할 때 gulp과 imagemin을 조사하거나 힘들었기 때문에 코피페만으로 사용할... 자바스크립트gulppngquantNode.jsimagemin 지금은 BrowserSync가 굉장히 편리하다. 기본적인 것 밖에 쓰지 않기 때문에, BrowserSync 사용한 적이 없는 방향입니다. 지금까지 아무것도 생각하지 않고 webpack-dev-server를 사용하고 있었습니다만, 조금 기분 전환이 엄청나게 BrowserSync를 시험해 보면, 감동의 기능이 막혀 있었으므로, 각서 김에 여기에 써 남깁니다. 이것입니다. 로컬 서버를 시작하고 파일 변경에 따라 자동으로 리로드를 해주는 도구입니... BrowserSyncnpm자바스크립트gulpNode.js Electron & Gulp 환경에서 Watch하고 LiveReload 느낌을 할 때 빠졌기 때문에 메모 취미로 프로그래밍을 접하고 친구와 함께 팀 개발을 하고 있습니다만, Electron & Gulp 환경에서 라이브 로드 같은 일을 할 수 있으면 대단한 편이구나-라든지 가벼운 기분 해 보면 대단히 빠졌다 그래서 메모. dependencies 와 devDependencies 의 정리가 되어 있지 않기 때문에 구분적으로 정확하다고는 할 수 없습니다... Babel, SCSS/SASS, 파일 번들 ... Electron자바스크립트gulp 심볼릭 링크가있는 디렉토리에서 gulp watch하여 아픈 눈을 본 이야기 제목대로입니다. 아픈 눈을 보지 않도록 비망록도 겸해. 제목처럼 생각했을 때가 나에게도있었습니다 ( ˘ω˘) watch 대상의 디렉토리 구성은 이쪽 매우 간단한 구성입니다. gulpfile.js 이것을 npm에서 시작하여 test 부하를 watch 해 보았습니다. 변경이 있으면 패스를 표시할 뿐일 것입니다… touch 명령으로 업데이트 날짜와 시간을 다시 씁니다. 그런데, gulp의 watc... 심링크gulpdirectoryNode.js Node.js+gulp를 이용한 Sass 이용 환경 구축 Node.js와 gulp를 사용하여 Sass의 사용 환경을 로컬 PC에 구축했을 때의 절차를 비망록으로 작성합니다. 에서 설치 프로그램을 DL합니다. 설치 프로그램을 시작합니다. 계속을 누르십시오. 계속을 누르십시오. 설치를 누르십시오. 설치가 완료되면 닫기를 누르십시오. 터미널을 시작하고 다음 명령을 실행하여 Node.js가 설치되어 있는지 확인합니다.node -v Node.js 버전이 표... 자바스크립트gulpCSSNode.jsSass gulp + Babel 소개 비망록 개인적인 메모로서(정보가 오래되었을 가능성이 있으므로 참고로 할 때는 주의) node 설치 적절하게 디렉토리를 작성 명령 프롬프트를 시작하고 디렉터리로 이동 ( cd C:\gulp-test ) C:\gulp-test> npm init 여러가지 듣기 때문에 대답한다 (나중에 변경 가능하므로 모르면 Enter로 날려 OK) package.json이 만들어진다 gulp 글로벌 설치 C:\gulp-... babel자바스크립트gulp 무료 SVG 소재의 출처를 명시하기위한 gulp 플러그인을 만들었습니다. SVG 파일과 SVG 파일의 캡션을 작성한 텍스트 파일 (.txt)을 주면 위 이미지와 같은 정적 HTML을 생성합니다. 무료 SVG 소재의 대부분은 사용 조건으로 출처를 명시하는 것을 언급합니다. 정해진 저자의 SVG 소재 밖에 사용하지 않는다면, 바닥글에 그 저자에 대한 크레딧을 표시하는 것으로 대응할 수 있습니다만, 복수의 저자/사이트의 소재를 조합해 사용하는 경우, 상기의 방법에서는,... gulpplugingulpSVG autoprefixer 기본 대상 브라우저를 설정하면 필요/불필요한 벤더 접두사를 추가/삭제합니다. CSS 처리. Sass를 사용하는 경우 변환 후 사용 의 기능으로 작동 gulp에서 Sass와 함께 사용되는 샘플 설치 npm install gulp gulp-sass gulp-postcss autoprefixer --save-dev gulp gulpfile.babel.js 대상 브라우저 설정 .browserslistrc... SassCSSgulp docker로 blueprint 컨테이너를 사용해보십시오. API 인터페이스 사양서를 작성하는 툴로 편리한 것이 없는지 조사해 보았다. 조금 낡은 것 같지만, 우선 blueprint를 시험해 본다. 아래의 파일 구성으로 구축해 보았습니다. 파일 목록 컨테이너로서는 다음의 2개를 준비합니다. Blueprint 컨테이너 (Markdown을 html로 변환) Nginx 컨테이너 (브라우저에 HTML 스펙을 게시) Nginx는 공식 컨테이너를 사용하므로 생... docker-compose도커Blueprintgulp gulp + typescript에서 소스 맵이 vscode에 인식되지 않을 때의 확인 점 "확인되지 않은 중단 점 생성 된 코드를 찾을 수 없으므로 중단 점이 무시되었습니다 (소스 맵 문제?)" .vscode/launch.json 의 outFiles 속성 launch.json의 outFiles 속성 지정에 컴파일 후 js 파일이 포함되는 것이 중요합니다. program 속성에 속해 있는 파일은 outFiles 속성에 포함되지 않아도 소스 맵이 효과가 있으므로, index.js의 ... SourceMapTypeScriptgulpNode.jsVisualStudioCode 비엔지니어를 위한 최초의 Gulp 이 기사는 Gulp를 우선 사용하고 싶다! Gulp의 설정을 스스로 만들고 싶은 분은 대상외가 되기 때문에, 양해 바랍니다. ※node.js의 인스톨 방법등, 더 좋은 방법은 있습니다만, 프로그램을 쓰거나 터미널을 접하는 것에 익숙하지 않은 사람용이므로, 최저한의 방법으로 소개하겠습니다. 사용할 수 있도록 준비 1. node.js를 설치합니다. node.js는 에서 설치 프로그램을 다운로드합... gulpNode.js gulp gulp-eslint 설정 안건으로 gulp를 사용하고 있는 환경에 맞았으므로, eslint나 htmlhint 주위의 메인터넌스와 비망록gulp-eslint 등을 조사하면 과거의 기사가 히트하기 때문에 공식을 보면서 재검토해 간다 ※ .eslintrc 는 작성되고 있는 전제로 진행합니다 gulp-eslint 설치 사용하는 것은 이것만 다른 사이트에서 plumber 라든지 node-notifier 를 사용하고 있지만 사... ESLintgulp SCSS 컴파일 오류시 데스크톱 알림을 보내는 방법 gulp에서 SCSS 컴파일 할 때, 오류가 발생하여 처리가 불가능하다는 것을 깨닫지 못하는 경우가 많았기 때문에, 데스크톱 알림을 받으려고했습니다. "gulp-notify""node-notifier"두 개의 패키지를 사용해 보았으므로, 둘 다 함께 둡니다. gulp-notify 를 install gulpfile.js에 task 쓰기 gulpfile.js 오류 발생 scss 알림이 나왔다! ... gulp-notifynode-notifierscssgulp webpack의 도입을 최소 단위로 시도 은 JavaScript를 정리해 주는 모듈 번들러입니다. 왜 정리해야 하는가? 이는 한 번에 웹 서버와 통신할 수 있는 파일 수가 제한되어 있기 때문에 파일 크기가 작은 파일을 세밀하게 전송하는 것보다 큰 파일을 한 번에 전송하는 것이 효율이 좋기 때문입니다. 그렇다면 다른 도구도 실현 가능하지만, webpack의 경우는 표준 사양의 ES Modules를 사용할 수 있고 node_module... webpack자바스크립트es6gulp HTML 메일 제작 CSS Support Guide for Email Clients | Campaign Monitor oulook에 있어서는 height가 효과가 없다, margin도 요소에 따라서는 효과가 없다, 의사 요소나 position, float등도 물론 사용할 수 없다, 라고 하는 상황이므로, 테이블 코딩에서의 (경우에 따라서는 spacer를 사용하거나) 레이아웃 조정 필요 제약이 많다는 것을 미리 ... HTML 메일gulp Gulp with Raspberry Pi Gulp 알림에 Raspberry Pi L 치카를 사용하십시오 Gulp로 통지를 내고 싶을 때는 gulp-notify등이 사용된다고 생각합니다만, Raspberry Pi로 프런트 엔드 개발을 할 때 L치카로 대용할 수 없는가 하고 생각해 보기로 했습니다. Raspberry Pi 3 L 치카 키트 (LED, 저항, 듀폰 케이블, 브레드 보드) 다음은 Raspberry Pi에서 OS와 같은 설정... RaspberryPi자바스크립트gulpNode.js 【메모】middleman4x의 livereload 브라우저에 추가 기능을 추가합니다. 내가 Firefox Quantum에 추가 한 것은 LiveReload 2.1.0 by Todd Wolfson gulpfile.js 그리고는 터미널에서 gulp를 기동시킬 뿐. 그냥 middleman3x의 livereload와 비교하면 엄청 느립니다.... middlemangulp 스플래툰 2의 Chrome 확장을 만들어 보았다. ikaWidget2라든지 사용하고 있으면, 원하는 기어가 와도 놓치기 때문에 어떻게든 하려고 했다. 거기서 제일 시작해 하는 일이 많은 Chrome 확장(Chrome Extension)으로 기어의 확인＋통지를 만들어 보았다. 드디어 TypeScript 만지지 않고 사용해 보았다! 이 근처를 참고로 여러가지 보았다. 우선 알았던 것. manifest 파일＋HTML＋CSS＋JS로 만들 수 있다.... TypeScriptchrome-extensiongulpNode.jsSplatoon 이전 기사 보기