[Javascript] Grunt 사용법

Grunt 

https://github.com/gruntjs/ - 11,949
    - v1.0.4 , 2019/03

https://gruntjs.com/getting-started


* grunt,gulp,webpack 인기도
https://trends.google.com/trends/explore?cat=31&date=today%205-y&q=grunt,gulp,webpack


//========
* Grunt CLI 전역 설치
npm install -g grunt-cli


* Node.js용 package.json 파일 생성
- 프로젝트 폴더에서 실행
npm init



* Grunt를 프로젝트에 설치
 npm install grunt --save-dev


//==================
< 패키지 설치 >
https://github.com/gruntjs/grunt-contrib

* 설치
npm install  grunt-contrib-jshint  grunt-contrib-concat  grunt-contrib-uglify grunt-contrib-cssmin  grunt-contrib-sass grunt-contrib-stylus grunt-contrib-less  grunt-contrib-csslint  grunt-contrib-watch  grunt-contrib-imagemin --save-dev


//========
* jslint : javascript 문법 검증

* concat  : 파일 합치기

* uglify : 파일 압축

* cssmin : CSS 파일 압축

* sass : Sass -> CSS
* stylus : Stylus -> CSS
* less : LESS -> CSS

* csslint : CSS 파일 검증

* watch : 파일 변화 자동 감지 처리

* imagemin : 이미지 파일 압축


//================
* gruntfile.js 파일 생성
파일에디터로 생성


https://junistory.blogspot.com/2017/07/gruntfile.html
https://css-tricks.com/organizing-grunt-tasks/

//==============
// 예시 샘플
module.exports = function(grunt) {
  grunt.initConfig({

//package.json 파일 읽기
    pkg: grunt.file.readJSON('package.json'),

//패키지 별 설정
    sass: {
      dist: {
        options: {
          style: 'expanded',
          sourcemap: 'none'
        },
        files: [
            {
                'public/css/test1.css': 'resources/assets/css/test1.scss',  // 'destination': 'source'
            },
            {
            expand: true,
            cwd: 'resources/assets/css',
            src: ['test2.scss'],
            dest: 'public/css',
            ext: '.css'
          }
        ]
      }
    },    
    cssmin: {
      target: {
        files: [{
            expand: true,
            cwd: 'public/css',
            src: ['*.css'],//, '!*.min.css'
            dest: 'public/css',
            ext: '.min.css'
          }]
      }
    },
    concat: {
      dist: {
        src: [
          'js/lib/no-conflict.js',
          'js/lib/skip-navigation.js',
        ],
        dest: 'js/scripts.js'
      },
    },
    jshint: {
      files: [
        'js/scripts.js',
        'js/ie.js',
      ],
      options: {
        scripturl: true,
        globals: {
          jQuery: true
        }
      }
    },
    uglify: {
      options: {
        mangle: false,
        compress: true,
        quoteStyle: 3
      },
      dist: {
        files: {
          'js/head.min.js': 'js/head.js',
          'js/scripts.min.js': 'js/scripts.js',
          'js/ie.min.js'     : 'js/ie.js',
        }
      }
    },
    watch: {
      scripts: {
        files: ['js/**/*.js'],
        tasks: ['concat', 'uglify'],
        options: {
          spawn: false
        }
      },
      css: {
        files: ['sass/**/*.scss'],
        tasks: ['sass', 'cssmin']
      }
    },
  });

//패키지 로딩
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-sass');

//명령 실행
  grunt.registerTask('default', ['watch']);

};


//================
* Grunt 작업 실행
grunt
grunt default //registerTask에 등록된 이름


grunt sass
    - 에러 발생
Warning:
You need to have Ruby and Sass installed and in your PATH for this task to work.

    - 에러 해결 방법
        - Sass와 Ruby를 설치

* Ruby 설치
http://www.ruby-lang.org/en/documentation/installation/#rubyinstaller

    - 버전확인
ruby -v


* Sass 설치 , Ruby 이용
gem install sass