티스토리 뷰
# Grunt로 css, js 파일 하나로 컴파일 하기 http://gruntjs.com/ (예제파일)
grunt_package.zip# grunt 설치환경 ( npm, node.js )세팅후...
# node.js 설치
1. https://nodejs.org/en/download/
2. RUN -> Next -> I accept the terms in the License Agreement -> Next -> 홀더경로 Next -> -> Install -> Finish
# 루비 설치
1. http://rubyinstaller.org/ or http://www.ruby-lang.org/ko/downloads/ or http://railsinstaller.org/en
2. 루비 설치
- RUN -> English -> I accept the License -> Add Rubes to your PATH , Associate .rb and .rbw files with this Ruby installation -> Install -> Finish 3. 재부팅 4. gem install sass 3. DEVELOPMENT KIT 설치 (DevKit-mingw64-64-4.7.2-20130224-1432-sfx.exe) -> Extract 4. 설치 홀더에서 이동 ruby dk.rb init
grunt projectSetting
# grunt 설치 : https://www.youtube.com/watch?v=TMKj0BxzVgw ======================== or SCOUT
# https://desktop.github.com/ (git 설치되어있어야한다.)
1. 그런트 전역설치
npm install -g grunt-cli
grunt --version
2. package.json 생성
npm init
3. package.json 파일 이름을 프로젝트 이름변경및 환경설정
{ "name": "gruntproject", "version": "0.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "dependencies": { "grunt": "^0.4.5" }, "devDependencies": { "grunt-contrib-concat": "^0.5.1", "grunt-contrib-watch": "^0.6.1" } }
4. package.json 실행
npm install
5. npm 설치 옵션 : https://docs.npmjs.com/cli/install
-g : --global : 전역설치
-S : --save : package.json 저장
-D : --save-dev : devDependencies 에저장 개발환경
-O : --save-optional : 옵션을 저장
-E : --save-exact : 정확한 버젼으로
npm install --save-dev grunt = npm install -S grunt
6. Gruntfile.js 파일생성
module.exports = function(grunt){ grunt.registerTask('speak', function(){ console.log("말해!"); }); grunt.registerTask('speakTo', function(){ console.log("또 말해!"); }); grunt.registerTask('both', ['speak', 'speakTo'] ); };
6. grunt both (결과값 test)
======================== 패키지 설치 ========================
1. bower 설치 (패키지 설치) (https://desktop.github.com/)
- pass설정bower : set PATH=%PATH%;C:\Users\<계정이름>\AppData\Roaming\npm
- pass설정git : set PATH=%PATH%;C:\Users\<YourUserName>\AppData\Local\GitHub\PortableGit_<SomeGuid>\cmd\;
- git shell 관리자 모드로 실행
npm install -g bower
bower install jquery#1.9.1
2. compass 설치 (패키지 설치) https://github.com/gruntjs/grunt-contrib-compass
npm install grunt-contrib-compass --save-dev
gem update --system && gem install compass
3. Gruntfile.js 파일 생성 테스트
module.exports = function(grunt){
grunt.initConfig({
compass: { // Task
dist: { // Target
options: { // Target options
sassDir: 'sass',
cssDir: 'css',
environment: 'production'
}
},
dev: { // Another target
options: {
sassDir: 'sass',
cssDir: 'css'
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.registerTask('default', ['jshint', 'compass']);
};
4. 실행, 'dest' 파일 묵인거 확인
grunt concat
# 플러그인 설치&사용 방법
#grunt 플러그인
# npm utile 플러그인
npm install --save-dev fs
npm install --save-dev fs-extra
npm install --save-dev path
# grunt-contrib-jshint 플러그인 설치 (js 오류보고)
npm install --save-dev grunt-contrib-jshint
- Gruntfile.js 수정
module.exports = function(grunt){ grunt.initConfig({ jshint: { all: ['Gruntfile.js', 'lib/**/*.js', 'test/**/*.js'] } });
grunt.loadNpmTasks('grunt-contrib-jshint');
}
# npm install grunt-changed --save-dev 플러그인 설치 (변경여부 감지)
npm install --save-dev grunt-contrib-uglify grunt-changed
- Gruntfile.js 수정
module.exports = function(grunt){ grunt.initConfig({
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-changed');
grunt.registerTask('minify', ['changed:uglify:all']);
};
# grunt-contrib-watch플러그인 설치 (홀더 실시간 감시 grunt-changed 같이 사용해야 효과적 )
npm install --save-dev grunt-contrib-watch
- Gruntfile.js 수정
module.exports = function(grunt){ grunt.initConfig({
watch: {
scripts: {
files: '**/*.js',
tasks: ['jshint'],
options: {
interrupt: true,
},
},
},
});
grunt.loadNpmTasks('grunt-contrib-watch');
};
# grunt-sass 플러그인 설치
npm install --save-dev grunt-contrib-sass
- Gruntfile.js 수정
module.exports = function(grunt){ grunt.initConfig({
sass: {
options: {
sourceMap: true
},
dist: {
files: {
'main.css': 'main.scss'
}
}
}
});
grunt.registerTask('default', ['sass']);
};
# grunt-contrib-cssmin 플러그인 설치 (css 압축)
npm install --save-dev grunt-contrib-cssmin
- Gruntfile.js 수정
module.exports = function(grunt){ grunt.initConfig({
cssmin: {
target: {
files: [{
expand: true,
cwd: 'release/css',
src: ['*.css', '!*.min.css'],
dest: 'release/css',
ext: '.min.css'
}]
}
}
});
grunt.loadNpmTasks('grunt-contrib-cssmin');
};
# autoprefixer 밴터 프리릭스
npm install --save-dev grunt-postcss autoprefixer
- Gruntfile.js 수정
module.exports = function(grunt){ grunt.initConfig({
postcss: {
options: {
map: true,
processors: [
require('autoprefixer')({browsers: ['last 2 versions', 'ie >=8', 'safari >=5', 'iOS >=5', 'Firefox >=3.0','Opera >=10.0']})
]
},
dist: {
files:{
'asset/css/common.css' : 'asset/css/common.css' // dest : src
}
}
}
});
grunt.loadNpmTasks('grunt-postcss');
grunt.registerTask('default', ['postcss']);
};
# grunt-contrib-concat 플러그인 설치 (js 합치기)
npm install --save-dev grunt-contrib-concat
- Gruntfile.js 수정
module.exports = function(grunt){ grunt.initConfig({
concat: {
options: {
separator: ';',
},
dist: {
src: ['src/intro.js', 'src/project.js', 'src/outro.js'],
dest: 'dist/built.js',
},
},
});
grunt.loadNpmTasks('grunt-contrib-concat');
};
# grunt-contrib-uglify 플러그인 설치 (js 압축)
npm install --save-dev grunt-contrib-uglify
- Gruntfile.js 수정
module.exports = function(grunt){ grunt.initConfig({
uglify: { options: { mangle: false }, my_target: { files: { 'dest/output.min.js': ['src/input.js'] } } }
});
grunt.loadNpmTasks('grunt-contrib-uglify');
}
# grunt-spritesmith 플러그인 설치 (자른이미지 합치기)
npm install --save-dev grunt-spritesmith
- Gruntfile.js 수정
module.exports = function(grunt){ grunt.initConfig({
sprite:{ all: { src: 'path/to/your/sprites/*.png', dest: 'destination/of/spritesheet.png', destCss: 'destination/of/sprites.css' } }
});
// Load in `grunt-spritesmith`
grunt.loadNpmTasks('grunt-spritesmith');
};
# grunt-contrib-imagemin 이미지 최적화
npm install --save-dev grunt-contrib-imagemin
- Gruntfile.js 수정
module.exports = function(grunt){
var mozjpeg = require('imagemin-mozjpeg');
grunt.initConfig({
imagemin: { // Task
static: { // Target
options: { // Target options
optimizationLevel: 3,
svgoPlugins: [{ removeViewBox: false }],
use: [mozjpeg()]
},
files: { // Dictionary of files
'dist/img.png': 'src/img.png', // 'destination': 'source'
'dist/img.jpg': 'src/img.jpg',
'dist/img.gif': 'src/img.gif'
}
},
dynamic: { // Another target
files: [{
expand: true, // Enable dynamic expansion
cwd: 'src/', // Src matches are relative to this path
src: ['**/*.{png,jpg,gif}'], // Actual patterns to match
dest: 'dist/' // Destination path prefix
}]
}
}
});
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', ['imagemin']);
# grunt-contrib-connect 플러그인 설치 (브라우저 자동갱신) or grunt-contrib-livereload
npm install --save-dev grunt-contrib-connect
- Gruntfile.js 수정
module.exports = function(grunt){ grunt.initConfig({
connect: { sever: { options: { hostname: 'localhost', port: 8000, base : './root/', keepalive: true, livereload: true, open:'http://localhost:8000/main.html' } } },
});
grunt.loadNpmTasks('grunt-contrib-connect');
};
# grunt-iconfont플러그인 설치 (svg -> font) fontforge
npm install --save-dev grunt-iconfont
- Gruntfile.js 수정
grunt.initConfig({
iconfont: {
options: {
fontName: "my-font-name"
},
your_target: {
src: 'glyphs/*.svg',
dest: 'font/'
}
},
});
grunt.loadNpmTasks('grunt-iconfont');
};
======================== grunt 플러그인 설치 ========================
plugins:1------------------------------------------- contrib-concat 플러그인 (js, css 컴파일 파일생성)------
2. contrib-concat 플러그인 설치
npm install --save-dev grunt-contrib-concat
3. Gruntfile.js 파일 생성 테스트
module.exports = function(grunt){
grunt.initConfig({
// pkg: grunt.file.readJSON('package.json'), concat: { js: { src: ['js/common.js', 'js/js1.js' ], dest: 'build/js/scripts.js.js', }, css: { src: ['src/basic.css', 'src/common.css.css'], dest:'build/css/styles.css', }, }, }); grunt.loadNpmTasks('grunt-contrib-concat'); };
4. 실행, 'dest' 파일 묵인거 확인
grunt concat
plugins:2------------------------------------------- contrib-sass 플러그인설치 -----------------------
2. contrib-sass 플러그인 설치
npm install --save-dev grunt-contrib-sass
3. Gruntfile.js 파일 수정
module.exports = function(grunt){ grunt.initConfig({ sass: { // Task dist: { // Target files: { // Dictionary of files 'asset/css/common.css': 'asset/sass/common.scss', // 'destination': 'source' } } }, }); grunt.loadNpmTasks('grunt-contrib-sass'); // sass 설치 };
4. 재실행
grunt sass
plugins:3------------------------------------------- contrib-css-min 플러그인설치 -----------------------
2. contrib-cssmin플러그인 설치
npm install --save-dev grunt-contrib-cssmin
3. Gruntfile.js 파일 수정
module.exports = function(grunt){ grunt.initConfig({ cssmin: { target: { files: [{ expand: true, cwd: 'build/css', src: ['*.css', '!*.min.css'], dest: 'build/css', ext: '.min.css' }] } }, }); grunt.loadNpmTasks('grunt-contrib-cssmin'); // cssmin 설치 };
4. 재실행
grunt cssmin
plugins:4------------------------------------------- contrib-uglifyn 플러그인설치 ( 자바스크립트 압축 ) -----------------------
2. contrib-cssmin플러그인 설치
npm install --save-dev grunt-contrib-uglify
3. Gruntfile.js 파일 수정
module.exports = function(grunt){ grunt.initConfig({ uglify: { target: { files: [{ expand: true, cwd: 'build/js', src: ['*.js', '!*.min.js'], dest: 'build/js', ext: '.min.js' }] } }, }); grunt.loadNpmTasks('grunt-contrib-uglify'); // uglify 설치 };
4. 재실행
grunt uglify
plugins:5------------------------------------------- contrib-watch 플러그인설치 (자동 컴파일)-----------------------
2. contrib-watch 플러그인 설치
npm install grunt-contrib-watch --save-dev
3. Gruntfile.js 파일 자동 컴파일 소스수정
// 1. 랩퍼 함수
module.exports = function(grunt){ // 2. 프로젝트 설정 및 플러그인 초기화 grunt.initConfig({ sass: { dist: { files: { 'asset/css/common.css': 'asset/sass/common.scss', // 'destination': 'source' } } }, concat: { js: { src: ['asset/js/common.js', 'asset/js/js1.js' ], dest: 'build/js/scripts.js', }, css: { src: ['asset/css/base.css', 'asset/css/common.css'], dest:'build/css/styles.css', }, }, cssmin: { target: { files: [{ expand: true, cwd: 'build/css', src: ['*.css', '!*.min.css'], dest: 'build/css', ext: '.min.css' }] } }, uglify: { target: { files: [{ expand: true, cwd: 'build/js', src: ['*.js', '!*.min.js'], dest: 'build/js', ext: '.min.js' }] } }, watch: { sass: { files: ['asset/sass/**/*.scss'], tasks: ['sass:dist'], }, js: { files: ['asset/js/**/*.js'], tasks: ['concat:js'], }, css: { files: ['asset/css/**/*.css'], tasks: ['concat:css'], }, cssmin: { files: ['build/css/**/*.css'], tasks: ['cssmin:target'], }, uglify: { files: ['build/js/**/*.js'], tasks: ['uglify:target'], }, }, }); // 3. 플러그인 로드 grunt.loadNpmTasks('grunt-contrib-sass'); // sass 실행 grunt.loadNpmTasks('grunt-contrib-concat'); // 컴파일 grunt.loadNpmTasks('grunt-contrib-cssmin'); // cssmin 실행 grunt.loadNpmTasks('grunt-contrib-uglify'); // uglify 실행 ( min.js ) grunt.loadNpmTasks('grunt-contrib-watch'); // 컴파일 자동
// 4. 태스크 등록 grunt.registerTask('default', ['sass', 'concat', 'cssmin', 'uglify', 'watch']); };
4. 재실행
grunt
'작업환경 > Publishing(setting)' 카테고리의 다른 글
| [Compass] 사용법 (sass and .scss) (0) | 2016.03.23 |
|---|---|
| [Brackets]setting & 확장기능 ( .brackets.json , js.concat ) (0) | 2016.03.09 |
| [Sublime Text3] 단축키 (0) | 2016.02.18 |
| [Sublime Text3] Setting (0) | 2016.02.17 |
| [Aptana Studio3]&[Eclipse] plugin (젠코딩 or Emmet , svn) (0) | 2014.03.26 |
- Total
- Today
- Yesterday