demun(대문블로그)

퍼블리셔/Grunt2016. 9. 9. 13:11

댓글 달아주신 분께 모두 메일 드렸습니다. 이번 이벤트는 마감합니다. 프론트엔드 자동화시스템 그런트라는 책을 출간하게 되었습니다.블로그 이웃들에게도 책을 공유하고자 이렇게 포스팅을 합니다.현재의 글을 자신의 블로그에 복사 붙여넣기해서 공유하거나, 책출판 내용을 포스팅하면 5분을 추첨해서 책을 발송해드립니다. 프론트엔드 자동화 시스템 그런트 Grunt, Yeoman, Bower,코드를 한단계 업그레이드 시킬 수 있는 가이드 -> http://book.naver.com/bookdb/book_detail.nhn?bid=11021303 책소개『프론트엔드 자동화 시스템 그런트』는 어느 정도 HTML, CSS, JAVASCRIPT 등을 알고 있는 대상자를 위한 책이다. 1장은 서브라임텍스트라는 에디터의 사용법을 다..

퍼블리셔/Grunt2015. 10. 2. 08:00

postcss less 와 sass 의 시대는 가는것인가? 하도 postcss 의 글이 많아서 테스트 해보았습니다.LESS, SASS, STYLUS 등은 프리프로세서(preprocessor) 라고해서 전처리 언어라고 말합니다. 즉 css 를 만들어 주는 언어입니다.SASS 는 sass, scss 두가지 문법을 지원합니다. 거기에 Compass 를 더하면 더욱 확장성이 좋아져서 잘 이용하곤 하지요. SASS 의 단점은 윈도우에서 사용하는데 있어서 제약이 있거나 속도가 느리다는 겁니다. 윈도우에서 사용하려면 Ruby 는 설치해서 사용하면 됩니다. 루비를 설치하지 않고 사용할 수 있도록 나온것이 libsass 입니다. libsass 는 속도도 개선이 됐다고 합니다.전처리언어중에서 SASS 가 가장 느립니다. ..

퍼블리셔/Grunt2015. 7. 5. 07:00

9.task 실행. 마지막 단계로 디버깅하기 쉽고, 관리하기 쉽게 task(작업)별로 나누어서 task를 실행하고 관리하는 예제 및 방법입니다. html task html 을 만드는 작업은 htmlhint 와 includes 모듈이 합니다. 이렇게 작업을 묶습니다.Gruntfile.js 에서 사용하는 예제는 아래와 같습니다. // html task grunt.registerTask('html', [ 'htmlhint', 'includes' ] ); css task 마찬가지로 css 를 만드는 작업은 less,csslint,autoprefixer,csscomb,cssmin 모듈이 사용되므로 이렇게 작업을 묶습니다.Gruntfile.js 에서 사용하는 예제는 아래와 같습니다. // css task grunt..

퍼블리셔/Grunt2015. 7. 4. 11:14

load-grunt-tasks load-grunt-tasks 원문글로빙 패턴(globbing patterns) 을 사용하여 여러개의 그런트 작업을 로드합니다.보통은 각 작업을 모두 로드해야 합니다.이 모듈은 package.json 의 dependencies/devDependencies/peerDependencies/optionalDependencies 를 읽고, 제공된 패턴과 일치하는 그런트 작업을 로드합니다. Before grunt.loadNpmTasks('grunt-shell'); grunt.loadNpmTasks('grunt-sass'); grunt.loadNpmTasks('grunt-recess'); grunt.loadNpmTasks('grunt-sizediff'); grunt.loadNpmTas..

퍼블리셔/Grunt2015. 7. 3. 07:00

time-grunt time-grunt 원문그런트 작업의 경과된 시간을 표시합니다. Install npm install --save-dev time-grunt Usage // Gruntfile.js module.exports = function (grunt) { // 이것은 상위에 요구되며, 그런트 인스턴스로 전달한다. require('time-grunt')(grunt); grunt.initConfig(); } Optional callback 선택적 콜밸 타이밍 통계를 수집할 경우, 콜백에 전달합니다. require('time-grunt')(grunt, function (stats, done) { // 원하는대로 통계를 가져온다 uploadReport(stats); // 종료할때 그런트에 알려준다. do..

퍼블리셔/Grunt2015. 7. 2. 07:00

grunt-concurrent grunt-concurrent 원문그런트 작업을 동시에 실행합니다.Coffee 와 Sass 같은 느린작업을 동시에 실행하면 잠재적으로 빌드시간을 크게 향상시킬수 있습니다.nodemon 과 watch 같은 다수의 작업multiple blocking tasks을 실행하고 한번에 관찰하는 경우 이 작업은 유용합니다. Install npm install --save-dev grunt-concurrent Usage require('load-grunt-tasks')(grunt); // npm install --save-dev load-grunt-tasks 과 같은 겁니다. grunt.initConfig({ concurrent: { target1: ['coffee', 'sass'], t..

퍼블리셔/Grunt2015. 7. 1. 11:11

grunt-newer grunt-newer 원문 작업중 Grunt 태스크를 가동시키려면 성공적으로 실행된 최종 파일 이후 수정된 소스파일들과 같이 실행하라 새로운 newer파일들 하고만 함께 실행되도록 Grunt 태스크를 설정하라Synopsis: newer 태스크가 또다른 태스크를 src파일(a, b)들과 함께 실행하기 위해 환경설정을 할것이다. dest 파일보다 새로운 최종 성공적으로 실행된 파일보다 새로운(dest파일이 없을 경우..) Getting Started 시작하기 이플러그인은 Grunt~0.4.1을 필요로 한다. 만일 이전에 Grunt를 사용한 경험이 없다면 gruntfile.js를 어떻게 생성하는가와 설치방법, 플러그인의 사용법등을 설명하고 있는 그런트 시작하기 가이드를 꼭 읽어보기 바란다..

퍼블리셔/Grunt2015. 6. 30. 07:00

8.최적화 newer , concurrent , time-grunt , load-grunt-tasks 좀더 쉽고, 체계적으로 작업하기 위한 최적화 과정의 예제와 방법입니다. newer newer 모듈은 변경된 파일이나 부분만을 감지하는 모듈입니다. 감시하는 모듈인 watch 에 주로 사용하며, 변경된 부분만 다시 리로드할때 주로 사용합니다.Gruntfile.js 에서 사용하는 예제는 아래와 같습니다. watch: { options: {livereload: true}, gruntfile: { files: ['Gruntfile.js'], tasks: ['newer:jshint:grunt'] }, } 설명 watch 에 사용된 예제로 Gruntfile.js 을 대상으로 jshint 작업에 grunt 작업부분을..

퍼블리셔/Grunt2015. 6. 29. 07:00

grunt-contrib-connect grunt-contrib-connect 원문connect web server를 시작 합니다. Getting Started 시작하기 이 플러그인은 Grunt~0.4.0을 필요로 한다.만일 이전에 Grunt를 사용한 경험이 없다면, Gruntfile을 어떻게 생성하는가와 설치방법, 플러그인의 사용법 등을 설명하고 있는 그런트 시작하기 가이드를 꼭 읽어보기 바란다. 그내용을 숙지했다면 아래의 명령어로 이 플러그인을 설치할 수 있을것이다. npm install grunt-contrib-connect --save-dev 플러그인이 설치되면, Gruntfile 내에서 자바스크립트의 코드로 아래의 명령을 사용할 수 있습니다 : grunt.loadNpmTasks('grunt-co..

퍼블리셔/Grunt2015. 6. 28. 07:00

grunt-contrib-watch grunt-contrib-watch 원문변경 또는 삭제, 파일 패턴이 추가 될 때마다 감시하여 미리 정의된 작업을 실행 Getting Started 시작하기 이 플러그인은 Grunt~0.4.0을 필요로 한다.만일 이전에 Grunt를 사용한 경험이 없다면, Gruntfile을 어떻게 생성하는가와 설치방법, 플러그인의 사용법 등을 설명하고 있는 그런트 시작하기 가이드를 꼭 읽어보기 바란다. 그내용을 숙지했다면 아래의 명령어로 이 플러그인을 설치할 수 있을것이다. npm install grunt-contrib-watch --save-dev 플러그인이 설치되면, Gruntfile 내에서 자바스크립트의 코드로 아래의 명령을 사용할 수 있습니다 : grunt.loadNpmTask..