[컴][웹] grunt 를 이용해서 문자열을 수정하기.

text replacement / text replace / string replacement




jade 소스에 jade compile 시에 사용할 설정값을 넣어놨는데, 이녀석 때문에 compile 할 때마다 소스를 수정해 줘야 했다. 그래서 이것을 grunt 의 text-replace 를 이용해서 해결 하기로 했다.

구글링을 해서 찾아보니 여러개가 있었다. 일단 눈에 띄는 것만 적어보면 아래 3개가 있었다.

1. yoniholmes/grunt-text-replace · GitHub
2. outaTiME/grunt-replace · GitHub
3. grunt-string-replace

이 중에서 그냥 개인적으로 GitHub 에 정리된 내용이 보기 편해서 1번을 택했다.
이 grunt task 로 할일은 간단하다. 그냥 특정 파일에 특정 string 을 내가 원하는 string 으로 바꾸는 일(replace) 을 할 것이다.

설치 

설치는 npm 을 통해 간단히 할 수 있다.

 npm install grunt-replace --save-dev

package.json

그리고 npm install 을 사용할 경우나, load-grunt-tasks(ref.2 참고) 를 사용하는 경우에는 package.json 에 grunt-replace 를 추가해 준다.


Gruntfile.js

module.exports = function(grunt) {

  /*  Load tasks  */
  require('load-grunt-tasks')(grunt);
  ...

package.json

{
  "name": "mine",
  "version": "1.3.0",
  "devDependencies": {
    "grunt": "~0.4.4",
    ...
    "grunt-text-replace": "~0.4.0"
    "load-grunt-tasks": "~0.4.0"

  }
} 

task 만들기

이제 replace 하는 task 를 만들어 보자. 간단하게 아래처럼 task 를 만들어 줄 수 있다. 더 많은 예제는 ref. 1을 참고하도록 하자.

module.exports = function(grunt) {

  /*  Load tasks  */

  require('load-grunt-tasks')(grunt);

  /*  Configure project  */

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    // Setup tasks
    replace:{
      toA : {
        src: [mysrc + "jade/common/common.jade"],
        overwrite : true,
        replacements: [
          {
            from: 'Red', 
            to: 'Blue'
          },
          {
            from: /(Red)\s(Apple)/, 
            to: '$1-$2'
          }
        ]
      },
    },

이렇게 task 를 만들면, common.jade 안의 "Red" 라는 string 을 모두 "Blue" 로 바꿔준다. 그리고 regex 를 사용한 부분은 Red Apple 을 Red-Apple 로 바꿔준다. 단 /.../g 옵션을 주지 않았기 때문에 한 번만 작동한다.

References

1. yoniholmes/grunt-text-replace · GitHub
2. load-grunt-tasks