추가적인 모듈

여기서 살펴볼 추가적인 모듈은 watch , connect , clean , copy , imagemin 입니다.

이 모듈들은 그런트로 환경구성하는데 있어 필요한 모듈들입니다.

하나 하나 살펴보겠습니다.

watch

와치는 아주 유명합니다. 실시간으로 코드와 브라우져를 동기화시켜주는 모듈입니다.

예를들어 에디터에서 코드를 수정하면 브라우져에서 수정한 코드를 바로 보여줍니다.

watch 는 livereload 를 이용합니다.

livereload 홈페이지 - http://livereload.com/

watch 저장소 - https://github.com/gruntjs/grunt-contrib-watch

watch 는 수정이 될 수 있는 파일과 모듈들을 연결시켜줍니다.

그래야 해당 파일들이 수정될때 해당 모듈들이 작동하는 방식입니다.

옵션을 보면, bower, gruntfile 는 js 파일을, js 는 자바스크립트 파일을, less 는 less 파일을 css 로 빌드해주는 역활을 하고, html, jade, 는 각각 html 로 빌드해주며, img 는 이미지를 저장하면 자동으로 목적지폴더에 복사해줍니다.

이렇듯 각 모듈들을 연결해서 소스코드 폴더를 실시간으로 동기화를 시켜줍니다.

watch: {
  bower: {
    files: ['bower.json'],
    tasks: ['wiredep']
  },
  gruntfile: {
    files: ['Gruntfile.js'],
    tasks: ['newer:jshint:grunt'],
    options: {
      livereload: true
    }
  },
  js: {
    files: [
      '<%= config.app %>/js/**/*.js'
      // '<%= config.app %>/js/common.js'
    ],
    tasks: ['newer:jshint:docs', 'concat:docs', 'uglify:docs'],
    options: {
      livereload: true
    }
  },
  less: {
    files: ['<%= config.app %>/less/**/*.less'],
    tasks: ['less', 'autoprefixer', 'csscomb', 'csslint', 'cssmin']
  },

  html: {
    files: ['<%= config.app %>/html/**/*.html'],
    tasks: ['includes'],
    options: {
      livereload: true,
    }
  },
  jade: {
    files: ['<%= config.app %>/jade/**/*.jade'],
    tasks: ['jade'],
    options: {
      livereload: true,
    }
  },
  img: {
    files: ['<%= config.app %>/images/**/*.{gif,jpeg,jpg,png}'],
    tasks: ['newer:imagemin'],
    options: {
      livereload: true,
    }
  }
}

connect

connect 는 서버를 구성해주는 모듈입니다.

connect 저장소 - https://github.com/gruntjs/grunt-contrib-connect

옵션을 보면 포트와, 호스트네임을 로컬호스트로하고 라이브리로드를 이용한다. 또한가지 open 을 이용해서 해당 html 파일을 자동으로 열수 있다.

이 html 이 아니더라도 일단 서버를 열게되면 모든 html 을 연결할수있고, 수정도 할 수있다. 이때 watch 와 같이 연결되면, 모든 파일을 실시간으로 수정할 수 있으며, 수정하면 바로 브라우져에서 로드되어 볼 수 있게 된다.

connect: {
  server: {
    options: {
      port: 9000,
      hostname: 'localhost',
      livereload: 35729,
      // keepalive: true,
      base: '<%= config.dist %>',
      open: 'http://<%= connect.server.options.hostname %>:<%= connect.server.options.port %>/test-html/index.html'
    }
  }
}

clean

clean 모듈은 필요없는 폴더와 파일을 삭제하는 모듈이다.

옵션을 보면 소스코드폴더의 css 폴더와 DevCode 폴더와 목적지폴더인 빌드폴더를 삭제한다

한가지 목적지폴더에서 images,fonts 폴더는 삭제하지 않는다.

이것은 제가 사용해보니 clean 을 자주 사용하는데 구지 이미지와 폰트를 삭제할 필요가 없는것 같아 이렇게 설정했습니다.

clean: {
  dist: {
    files: [{
      dot: true,
      nonull: true,
      src: [
        '<%= config.app %>/css',
        '<%= config.devcode %>/**/*.*',
        '<%= config.dist %>/**/*.*',
        '!<%= config.dist %>/images/**/*.*',
        '!<%= config.dist %>/fonts/**/*.*'
      ]
    }]
  },
}

copy

copy 모듈은 폴더나 파일을 복사해주는 모듈이다.

copy 저장소 - https://github.com/gruntjs/grunt-contrib-copy

옵션을 보면 크게 build 와 dev 로 나뉜다.

build 는 차후 개발자들이 참고하라고 만든 DevCode 폴더를 만드는 과정이다.

이게 필요없다면 사용하지 않아도 무방하다.(개인적으로 필요하다 생각되서 추가한것임)

dev 를 보면 나눔고딕을 사용할때 사용하려고 만들어놓은 fonts 폴더와 bower 로 설치되었던 플러그인들을 목적지폴더에 plugins 폴더에 복사한다.

필요에 의해 bower 설치한 플러그인들은 여기서 복사를 해줘야 사용할 수 있다.

copy: {
  build: {
    files: [
      {
        expand: true,
        // flatten: true,
        // filter: 'isFile',
        cwd: '<%= config.app %>',
        src: ['**','!grunt/**','!less/**'],
        dest: '<%= config.devcode %>'
      }
    ]
  },
  dev: {
    files: [
      // fonts
      {
        expand: true,
        cwd: '<%= config.bsless %>/fonts/',
        src: '**',
        dest: '<%= config.dist %>/fonts/'
      },
      // jquery
      {
        nonull: true,
        src: '<%= config.bower %>/jquery/jquery.min.js',
        dest: '<%= config.dist %>/js/lib/jquery.min.js'
        },
      .....
      // bootstrap
      {
        expand: true,
        cwd: '<%= config.bower %>/bootstrap/dist/',
        src: ['**','!npm.js'],
        dest: '<%= config.dist %>/plugins/bootstrap/'

      }
    ]
  },
}

imagemin

imagemin 는 이미지 최적화 모듈이다.

imagemin 저장소 - https://github.com/gruntjs/grunt-contrib-imagemin

옵션을 보면 빌드가 완료되면 메시지를 보낸다.

다른 옵션은 소스폴더의 이미지를 목적지폴더의 이미지폴더에 최적화해서 넣는다.

imagemin: {
  options: {
    title: '빌드완료',  // optional
    message: '<%= pkg.name %> 구축을 성공적으로 완료.' //required
  },
  dist: {
    files: [{
      expand: true,
      cwd: '<%= config.app %>/images/',
      src: ['**/*.{png,jpeg,jpg,gif}'],
      dest: '<%= config.dist %>/images/'
    }]
  }
}

여기까지 watch , connect , clean , copy , imagemin 에 대해서 알아봤다

그런트 작업환경 구성하기 는 여기까지의 모듈로 충분이 사용가능하다.

나머지 모듈은 Grunt 를 좀더 최적화하거나 사용자가 본인의 환경에 맞게 수정하는 것이다.