Task - less태스크, connect태스크 추가 및 LiveReload

개요

Less 파일을 하나의 CSS로 생성하고 축소하는 컴파일 과정을 Grunt로 자동화 하고 http서버를 구동하자.

livereload를 설정하면 소스 코드가 변경시 자동으로 브라우저가 refresh되도록 할 수 있다.

방법

# less, connect 패키지 설치.

1. package.json 파일 수정.

{
  "name": "CAL_Website_v2",
  "version": "0.1.0",
  "description": "used Bootstrap, greater then ie8",
  "dependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-uglify": "~0.2.0",
    "grunt-contrib-watch": "^1.0.0",
    "grunt-contrib-connect": "^1.0.1"
  },
  "devDependencies": {
  "grunt-contrib-less": "^0.11.0"
  }
}

2. command 창에 npm install 실행하여 패키지 설치.

# less 태스크 설정 추가.

1. Gruntfile.js 파일 수정.

module.exports = function (grunt){ //모든 설정은 exports 함수안에 넣는다.
 grunt.initConfig({ //대부분의 플러그인은 initConfig 함수 안에 포함하면 된다.
  pkg: grunt.file.readJSON('package.json'), //템플릿 표준 구분(<%= %>)을 통해 package.json 파일의 정보 사용.
  uglify: { //option과 build 두 속정 사용.
   options: {
    banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n' //새로 생성될 js파일의 맨 윗부분에 들어가는 주석 셋팅.
   },
   build: {
    src: [
     'src/js/vendor/plugins.js',  //사용자정의 javascript.
     'src/js/vendor/bootstrap.js'
    ], //uglify할 대상 파일들.
    dest: 'dist/js/p1.js' //ugligy로 생성할 파일.
   }
  },
  less: {
   dev: { //개발용
    files: {
     'src/css/main.css': 'src/css/less/bootstrap.less'
    }
   },
   production: { //build용
    options: {
     cleancss: true //축소옵션 추가.
    },
    files: {
     'dist/css/main.css': 'src/css/less/bootstrap.less'
    }
   }
  },
  watch: {
   files: [ //변경을 감지할 파일들.
    'src/js/vendor/plugins.js',
    'src/js/*.js'
   ],
   tasks: ['uglify'] //변경시 실행할 태스크.
  }
 });
 grunt.loadNpmTasks('grunt-contrib-uglify'); //그런트에게 uglify태스크를 사용할 것을 명시.
 grunt.loadNpmTasks('grunt-contrib-less'); //그런트에게 less태스크를 사용할 것을 명시.
 grunt.loadNpmTasks('grunt-contrib-watch'); //그런트에게 watch태스크를 사용할 것을 명시.
 grunt.registerTask('default', ['watch']); //'grunt default' 또는 'grunt' task 설정 -> 개발시.
 grunt.registerTask('production', ['uglify']); //'grunt production' task 설정 -> 배포시.
};

# less 태스크 실행

1. command 창에 grunt less 실행 ( 모든 태스크 환경이 실행된다. 특정 환경으로만 실행하려면  grunt less:dev 과 같이 실행 )

# Watch 태스크에 less 설정 추가.

1. Gruntfile.js 파일의 watch 설정 수정.

  watch: {
   js: {
    files: [ //변경을 감지할 파일들.
     'src/js/vendor/plugins.js',
     'src/js/*.js'
    ],
    tasks: ['uglify'] //변경시 실행할 태스크.
   },
   less: {
    files: [
     'src/css/less/*.less'
    ],
    tasks: ['less:dev']
   }
  }

# connect 태스크 설정 추가.

1. Gruntfile.js 파일의 connect 설정 수정.

  connect: {
   server: {
    options: {
     port: 9000,
     hostname: 'localhost',
     livereload: 35729,
     //keepalive: true, //watch를 사용하기 때문에 필요하지 않다. 사용하면 서버 구동 후 다음 작업을 실행할 수 없어 watch를 할 수 없다.
     base: 'dist', //서버를 구동할 root폴더
     open: 'http://<%= connect.server.options.hostname %>:<%= connect.server.options.port %>/index.html'
    }
   }
  }

2. connect 테스트 ( keepalive를 설정하지 않아 실행 후 바로 종료된다. )

# LiveReload 설정.

1. Gruntfile.js 파일의 watch 설정 수정.

  watch: {
   js: {
    files: [ //변경을 감지할 파일들.
     'src/js/vendor/plugins.js',
     'src/js/*.js'
    ],
    tasks: ['uglify'], //변경시 실행할 태스크.
    options: {
     livereload: true
    }
   },
   less: {
    files: [
     'src/css/less/*.less'
    ],
    tasks: ['less:dev']
   }
  },

2. 2개의 태스크를 실행하기 위해 태스크 설정 이용.

 grunt.registerTask('default', ['connect:server', 'watch']); //'grunt default' 또는 'grunt' task 설정 -> 개발시.

2. connect 실행 ( 서버가 구동되고 wait가 실행된다. 브라우저가 자동으로 열리고 main.js 파일을 수정하면 자동으로 새로고침 된다 )