[Grunt] sass 설치&기본세팅 (min.css, min.js)

# 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/)

bower 설치 : npm install -g bower 패키지 관리 json 생성 : bower init 라이브러리 설치 & 패키지에 등록 : bower install [라이브러리명] --save or bower install [라이브러리명] -s 패키지에 등록된 라이브러리들 설치 : bower install

- 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