티스토리 뷰

# 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

_gruntSetting_170119.zip

# 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 플러그인

- http://gruntjs.com/plugins 


# 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({


uglify: { all: { files: { 'dest/app.min.js': ['src/**/*.js'] } } }


      });

 

  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 수정

module.exports = function(grunt){ 

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 컴파일 파일생성)------

1. http://gruntjs.com/plugins 

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 플러그인설치 -----------------------

1. http://gruntjs.com/plugins


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 플러그인설치 -----------------------

1. http://gruntjs.com/plugins


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 플러그인설치 ( 자바스크립트 압축 ) -----------------------

1. http://gruntjs.com/plugins


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 플러그인설치 (자동 컴파일)-----------------------

1. http://gruntjs.com/plugins

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



댓글
  • 프로필사진 투자본능 안녕하세요 포스팅 감사합니다.
    질문이 있는데요
    postcss를 설치했는데 web-kit만 벤더프리픽스만 붙는데 왜그런거죠? moz 이것저것 다 하고싶은데 어떻게 해야하나요?
    -webkit-box-sizing: border-box; 이렇게요
    개념이 없네요 ㅠㅠ


    이런식으로 require('autoprefixer') ({browsers: -['ie 8','ie 9','Firefox 3.0','Opera 10.0']})
    다 적어야 하나요?

    예를들어 firefox 3.0 3.1 이렇게 다 적어야 해요?
    2017.08.30 11:34 신고
  • 프로필사진 turfrain 이것 저것 다하려면 다적어 주셔야 합니다.

    browsers: [ 'last 2 versions', 'ie >=8', 'safari >=5', 'iOS >=5', 'Firefox >=3.0','Opera >=10.0']

    'last 2 versions' 브라우져 마지막 2가지 버젼을 의미 합니다.
    ie를 제외 하고는 업데이트가 가능하니, 모든 브라우져를 적어주실 필요는 없을듯합니다. 사파리 정도까지 적는것이 적당할듯합니다. 사파리를 적은것은 윈도우 사파리를 염두한것입니다.
    2017.12.14 22:23 신고
댓글쓰기 폼