gulp 포트폴리오 "Stay Japan"을 Scss에서 구현 및 응답 가능 구현 프런트 엔드 엔지니어를 목표로 프로그래밍을 배우고 있습니다. 나가타라고 합니다. 프로그래밍 학습의 아웃풋으로서 자작의 「Stay Japna」를 공개합니다. 이 기사에서는 「Stay Japna」의 개요에 대해 설명합니다. 소스 코드↓ 자신의 프로그래밍 학습 출력 보수성, 운용성을 높이기 위한 Scss로의 기술과 css설계의 BEM에서의 기술로 컴포넌트화를 실행해, 개발 스피드를 향상시킨다. 반... 반응형 디자인scss자바스크립트gulpHTMLCSS gulp + coffeescript로 편하게 프런트 개발 환경 구축 평소 집에서는 개발하지 않는 나이지만, 너무 어쩔 수 없어 회사에서는 개발할 수없는 소규모 앱이나 플러그인을 개발하고 싶은 경우가 있습니다. 이번에는 CoffeeScript + gulp을 이러한 집에서의 편의성 개발 환경으로 채택하여 개요 및 도입 방법을 기록했습니다. CoffeeScript는 AltJS라는 자바스크립트의 고급 대체언어(소프트 JavaScript를 더 좋은 느낌으로 한 언어)... Node.jsgulpCoffeeScript gulp를 사용하여 phpunit을 자동화 할 때 빠졌습니다. vim 사용하면서도 php의 개발을 효율화하고 싶다! 코드 수정하고 phpunit를 움직이는 것이 다르다고 생각하고 gulp를 사용하여 자동화해 보았습니다. 개발하면서 동적으로 여러 번 테스트가 실행되는 환경을 만들고 싶다. 왠지 일단 phpunit가 실행되면, 2회째 이후 phpunit가 실행되지 않는다. gulp-plumber를 사용하거나 하는 기사는 보이고 시험하거나는 해 보았습니다만,... PHPUnitPHPgulp-phpunitgulp Gulp란? 사용 환경을 정돈하기 효율적인 웹 제작을 실현하기 위해 Gulp를 사용하여 프런트 엔드 개발 환경을 구축하는 방법을 배웠습니다. 다양한 처리를 자동으로 실시해 주는 태스크 자동화 툴로, 한 번 설정해 두면 개발의 작업 효율을 도모할 수 있습니다. Gulp는 태스크 러너라고 불리며, 결정된 태스크를 JavaScrip을 사용하여 프로그래밍할 수 있습니다. 2.Sass 파일을 CSS 파일로 자동으로 프리컴파일(node... YARNcomandgulpNode.js gulp를 GUI에서 사용하기 위한 알레콜레 아직 정리하기에는 빠를까라고 생각하면서 슬슬 움직임이 있을 것 같기 때문에 앞으로도 이 페이지를 업데이트하고 몇 가지로 써 봅니다. 먼저 본명에서. 방금 리포지토리가 공개되었을 뿐 아직 곧 사용할 수 있다는 단계는 아니지만 Finder에서 대상 디렉토리를 열어두면 gulpfile.js '적 앱. node-webkit로 구현됩니다. 지원되는 환경: Mac URL: Sublime용: Atom용:... SublimeText3gulpATOMWebStorm node 4.0 이상 나왔지만, gulpfile.babel.js를 쓰는 법은 무엇인가 바뀌는 거야? 그러고 보니 Node.js ~> 4.0.0가 나오고 나서 아무것도 하지 않겠다고 생각하고 가볍게 를 참고하면서 해 보려고 했지만, 10분 정도 빠진 느낌이었기 때문에 기사화하려고 생각했다 간단히 아래와 같은 쓰는 방법을 하면 일단 움직일까, 라고 생각해 시험해 보았지만, 당연히 이것이라면 움직이지 않습니다 우선 보통의 Node.js라면 import 문을 해석할 수 없습니다 그래서 인식시키기 ... 자바스크립트es2015gulpNode.jsbabel 【Gulp】Sass를 감시·컴파일한 타이밍에 채팅 워크에 메시지를 보낸다 평상시는 프런트 엔드의 태스크 러너에 「grunt」를 사용하고 있습니다만, 「gulp」가 좋다고 하는 소리를 최근 잘 듣기 때문에 시험해 보았습니다. 둘 다 Node.js에서 작동하기 때문에 개인적인 감각에서는 그 도입 절차에 큰 차이는 없지만 일단 기록해 둡니다. sass 컴파일 작업 실행 후 채팅 작업에 메시지를 보내려고합니다. (트리거는 sass의 컴파일이 아니어도 됩니다만) 프로젝트의... Chatworkgulp RiotJS에서 pug 사용 RiotJS 초보자 입니다. 오랫동안 RiotJS를 쓰고 싶다면 jade에서 pug로 만들었습니다. 그런 메시지가 나오거나 우라시마 상태였습니다. 퍼그 귀엽다, 어이. 따라서 RiotJS + gulp + pug로 다시 작성할 때의 메모입니다. 그렇다고해도 거의 jade와 pug는 기법이 변하지 않는 것 같기 때문에, 순간이었지만. ES2016의 방법을 모르기 때문에, 알고 있으면 그 근처를 ... pugriotriot.jsgulp gulp-pug를 사용하고 있을 때 pug에서 markdown을 include하기 위해 filter를 써 보았다. 옛날의 jade라면, 보통으로 순조롭게 markdown 정도 include 되어 있었는데. jade의 무렵은 이렇게 간단했다. 특히 jade의 filter 등의 구현은 필요하지 않았다. pug로 이것을 하려고 하면 할 수 없었지만, 아무래도 markdown가 쓰고 싶어서 gulpfile.babel.js 를 조금 만졌다. 절차는 대체로 2개. gulp-jade 와 같이 filter를 추가하면 ... pugMarkdowngulp gulp로 이미지 압축 「이 기사를 보면 gulp로 화상을 압축하는 순서를 알 수 있다!」라고 하는 기사입니다. 이미지의 압축 툴은 여러가지 있어, 유명한 곳이라면 를 사용하고 있는 분도 많다고 생각합니다. 그러나, 프로덕션 공개 전의 화상등을 외부 서비스로 압축하는 것은 어떻습니까, 라고 하는 회사도 있다고 생각하므로, 이번은 gulp를 사용해 로컬 환경에서 압축하는 방법을 정리했습니다. 참고가되면 꼭 LGTM을... 프런트 엔드npmgulpNode.js 【Sass】중요 용어와 환경 구축 방법(gulp) Sass를 사용할 수 있도록 환경을 구축할 수 있었으므로, 메모로서 이쪽에 기록해 둔다. 덧붙여서 node-sass로 컴파일하고 있습니다. gulp.ver4 1,Sass 환경 구축에 있어서 중요한 용어·지식의 설명 2, Sass 환경 구축 절차 LibSass를 Node.js에서 실행할 수 있는 라이브러리 설치와 동시에 패키지 관리자(npm)를 사용할 수 있게 된다. npm의 정식 명칭은 No... gulpCSS초보자CSS3Sass 테스트 구동 마크 업의 주요 이 기사에서는 Heydon Pickering(헤이든 피커링)이 제안한 개발 기법인 테스트 구동 마크업에 대한 설명과 운영 모범 사례를 소개합니다. 새로운 모듈 시스템 을 사용하여 테스트 구동 마크 업용 스타일 시트를로드하는 방법을 변경했습니다. 반대로 프로그램을 구현하기 전에 테스트를 작성하는 기법이 테스트 구동 개발(Test Driven Development; TDD)입니다. CSS에 테스... Node.jsgulpCSS테스트 구동 개발Sass
포트폴리오 "Stay Japan"을 Scss에서 구현 및 응답 가능 구현 프런트 엔드 엔지니어를 목표로 프로그래밍을 배우고 있습니다. 나가타라고 합니다. 프로그래밍 학습의 아웃풋으로서 자작의 「Stay Japna」를 공개합니다. 이 기사에서는 「Stay Japna」의 개요에 대해 설명합니다. 소스 코드↓ 자신의 프로그래밍 학습 출력 보수성, 운용성을 높이기 위한 Scss로의 기술과 css설계의 BEM에서의 기술로 컴포넌트화를 실행해, 개발 스피드를 향상시킨다. 반... 반응형 디자인scss자바스크립트gulpHTMLCSS gulp + coffeescript로 편하게 프런트 개발 환경 구축 평소 집에서는 개발하지 않는 나이지만, 너무 어쩔 수 없어 회사에서는 개발할 수없는 소규모 앱이나 플러그인을 개발하고 싶은 경우가 있습니다. 이번에는 CoffeeScript + gulp을 이러한 집에서의 편의성 개발 환경으로 채택하여 개요 및 도입 방법을 기록했습니다. CoffeeScript는 AltJS라는 자바스크립트의 고급 대체언어(소프트 JavaScript를 더 좋은 느낌으로 한 언어)... Node.jsgulpCoffeeScript gulp를 사용하여 phpunit을 자동화 할 때 빠졌습니다. vim 사용하면서도 php의 개발을 효율화하고 싶다! 코드 수정하고 phpunit를 움직이는 것이 다르다고 생각하고 gulp를 사용하여 자동화해 보았습니다. 개발하면서 동적으로 여러 번 테스트가 실행되는 환경을 만들고 싶다. 왠지 일단 phpunit가 실행되면, 2회째 이후 phpunit가 실행되지 않는다. gulp-plumber를 사용하거나 하는 기사는 보이고 시험하거나는 해 보았습니다만,... PHPUnitPHPgulp-phpunitgulp Gulp란? 사용 환경을 정돈하기 효율적인 웹 제작을 실현하기 위해 Gulp를 사용하여 프런트 엔드 개발 환경을 구축하는 방법을 배웠습니다. 다양한 처리를 자동으로 실시해 주는 태스크 자동화 툴로, 한 번 설정해 두면 개발의 작업 효율을 도모할 수 있습니다. Gulp는 태스크 러너라고 불리며, 결정된 태스크를 JavaScrip을 사용하여 프로그래밍할 수 있습니다. 2.Sass 파일을 CSS 파일로 자동으로 프리컴파일(node... YARNcomandgulpNode.js gulp를 GUI에서 사용하기 위한 알레콜레 아직 정리하기에는 빠를까라고 생각하면서 슬슬 움직임이 있을 것 같기 때문에 앞으로도 이 페이지를 업데이트하고 몇 가지로 써 봅니다. 먼저 본명에서. 방금 리포지토리가 공개되었을 뿐 아직 곧 사용할 수 있다는 단계는 아니지만 Finder에서 대상 디렉토리를 열어두면 gulpfile.js '적 앱. node-webkit로 구현됩니다. 지원되는 환경: Mac URL: Sublime용: Atom용:... SublimeText3gulpATOMWebStorm node 4.0 이상 나왔지만, gulpfile.babel.js를 쓰는 법은 무엇인가 바뀌는 거야? 그러고 보니 Node.js ~> 4.0.0가 나오고 나서 아무것도 하지 않겠다고 생각하고 가볍게 를 참고하면서 해 보려고 했지만, 10분 정도 빠진 느낌이었기 때문에 기사화하려고 생각했다 간단히 아래와 같은 쓰는 방법을 하면 일단 움직일까, 라고 생각해 시험해 보았지만, 당연히 이것이라면 움직이지 않습니다 우선 보통의 Node.js라면 import 문을 해석할 수 없습니다 그래서 인식시키기 ... 자바스크립트es2015gulpNode.jsbabel 【Gulp】Sass를 감시·컴파일한 타이밍에 채팅 워크에 메시지를 보낸다 평상시는 프런트 엔드의 태스크 러너에 「grunt」를 사용하고 있습니다만, 「gulp」가 좋다고 하는 소리를 최근 잘 듣기 때문에 시험해 보았습니다. 둘 다 Node.js에서 작동하기 때문에 개인적인 감각에서는 그 도입 절차에 큰 차이는 없지만 일단 기록해 둡니다. sass 컴파일 작업 실행 후 채팅 작업에 메시지를 보내려고합니다. (트리거는 sass의 컴파일이 아니어도 됩니다만) 프로젝트의... Chatworkgulp RiotJS에서 pug 사용 RiotJS 초보자 입니다. 오랫동안 RiotJS를 쓰고 싶다면 jade에서 pug로 만들었습니다. 그런 메시지가 나오거나 우라시마 상태였습니다. 퍼그 귀엽다, 어이. 따라서 RiotJS + gulp + pug로 다시 작성할 때의 메모입니다. 그렇다고해도 거의 jade와 pug는 기법이 변하지 않는 것 같기 때문에, 순간이었지만. ES2016의 방법을 모르기 때문에, 알고 있으면 그 근처를 ... pugriotriot.jsgulp gulp-pug를 사용하고 있을 때 pug에서 markdown을 include하기 위해 filter를 써 보았다. 옛날의 jade라면, 보통으로 순조롭게 markdown 정도 include 되어 있었는데. jade의 무렵은 이렇게 간단했다. 특히 jade의 filter 등의 구현은 필요하지 않았다. pug로 이것을 하려고 하면 할 수 없었지만, 아무래도 markdown가 쓰고 싶어서 gulpfile.babel.js 를 조금 만졌다. 절차는 대체로 2개. gulp-jade 와 같이 filter를 추가하면 ... pugMarkdowngulp gulp로 이미지 압축 「이 기사를 보면 gulp로 화상을 압축하는 순서를 알 수 있다!」라고 하는 기사입니다. 이미지의 압축 툴은 여러가지 있어, 유명한 곳이라면 를 사용하고 있는 분도 많다고 생각합니다. 그러나, 프로덕션 공개 전의 화상등을 외부 서비스로 압축하는 것은 어떻습니까, 라고 하는 회사도 있다고 생각하므로, 이번은 gulp를 사용해 로컬 환경에서 압축하는 방법을 정리했습니다. 참고가되면 꼭 LGTM을... 프런트 엔드npmgulpNode.js 【Sass】중요 용어와 환경 구축 방법(gulp) Sass를 사용할 수 있도록 환경을 구축할 수 있었으므로, 메모로서 이쪽에 기록해 둔다. 덧붙여서 node-sass로 컴파일하고 있습니다. gulp.ver4 1,Sass 환경 구축에 있어서 중요한 용어·지식의 설명 2, Sass 환경 구축 절차 LibSass를 Node.js에서 실행할 수 있는 라이브러리 설치와 동시에 패키지 관리자(npm)를 사용할 수 있게 된다. npm의 정식 명칭은 No... gulpCSS초보자CSS3Sass 테스트 구동 마크 업의 주요 이 기사에서는 Heydon Pickering(헤이든 피커링)이 제안한 개발 기법인 테스트 구동 마크업에 대한 설명과 운영 모범 사례를 소개합니다. 새로운 모듈 시스템 을 사용하여 테스트 구동 마크 업용 스타일 시트를로드하는 방법을 변경했습니다. 반대로 프로그램을 구현하기 전에 테스트를 작성하는 기법이 테스트 구동 개발(Test Driven Development; TDD)입니다. CSS에 테스... Node.jsgulpCSS테스트 구동 개발Sass