Grunt(그런트) 후처리 언어 postcss 를 grunt 에서 테스트 해봤습니다.

postcss

less 와 sass 의 시대는 가는것인가? 하도 postcss 의 글이 많아서 테스트 해보았습니다.

LESS, SASS, STYLUS 등은 프리프로세서(preprocessor) 라고해서 전처리 언어라고 말합니다. 즉 css 를 만들어 주는 언어입니다.

SASS 는 sass, scss 두가지 문법을 지원합니다. 거기에 Compass 를 더하면 더욱 확장성이 좋아져서 잘 이용하곤 하지요.

SASS 의 단점은 윈도우에서 사용하는데 있어서 제약이 있거나 속도가 느리다는 겁니다. 윈도우에서 사용하려면 Ruby 는 설치해서 사용하면 됩니다. 루비를 설치하지 않고 사용할 수 있도록 나온것이 libsass 입니다. libsass 는 속도도 개선이 됐다고 합니다.

전처리언어중에서 SASS 가 가장 느립니다. 이 모든것을 극복하고 나온것이 postcss 이고 이건 또 후처리 언어라고 합니다. LESS, 'SASS' 그리고 libsass 할것없이 제일 빠르다고 합니다.

여기에 브라우져마다 지원하는 벤더프리픽스를 자동으로 넣어주는 autoprefixer 플러그인이 있는데 이걸 만든사람이 postcss 를 만들었습니다.

postcss 에 autoprefixer 플러그인을 탑재하면 자동으로 벤더프리픽스까지 붙여주죠.

현재 나와있는 글들을 종합해보면 sass + postcss(autoprefixer) 이 조합이 가장 좋다고 합니다.

그란트(grunt) 로 한번 테스트 해봤습니다.

sass + postcss(autoprefixer) 조합이냐? postcss(precss + autoprefixer) 조합이냐?

결론을 먼저 말하자면 postcss(precss + autoprefixer) 조합이 좋고, 차후에는 postcss 가 더 좋을것 같습니다.

precss는 postcss 에서 지원하는 sass 구문을 그대로 사용할수 있게 해주는 플러그인 입니다.

파일은 한개로, 또 다른 파일한개를 인클루드합니다. Variables, Conditionals, Loops, Mixins, Extends, Imports 등 precss 에 나와있는 구문을 근거로 코드를 넣고 작업했습니다.

Gruntfile.js 에서 sass 작업과 postcss 작업은 아래와 같습니다.

// Gruntfile.js
sass: {
    dist: {
        expand: true,
        cwd: 'src/sass/',
        src: ['*.scss'],
        dest: 'dest/css/',
        ext: '.css'
    }
},
postcss: {
    sassPost: {
        options: {
            processors: [
                require('autoprefixer')({
                    browsers: [
                        'Android 2.3',
                        'Android >= 4',
                        'Chrome >= 35',
                        'Firefox >= 31',
                        'Explorer >= 9',
                        'iOS >= 7',
                        'Opera >= 12',
                        'Safari >= 7.1'
                    ]
                })
            ]
        },
        dist: {
            expand: true,
            cwd: 'dest/css',
            src: ['*.css'],
            dest: 'dest/css',
            ext: '.css'
        }
    },
    prePost: {
        options: {
            parser: require('postcss-scss'),
            processors: [
                require('precss')({ /* options */ }),
                require('autoprefixer')({
                    browsers: [
                        'Android 2.3',
                        'Android >= 4',
                        'Chrome >= 35',
                        'Firefox >= 31',
                        'Explorer >= 9',
                        'iOS >= 7',
                        'Opera >= 12',
                        'Safari >= 7.1'
                    ]
                })
            ]
        },
        dist: {
            expand: true,
            cwd: 'src/css',
            src: ['*.css'],
            dest: 'dest/css',
            ext: '.css'
        }
    }
},

sass, postcss 작업을하는데 autoprefixer 플로그인을 포함했습니다.

grunt.registerTask('sassPost', [
        'sass',
        'postcss:sassPost'
    ]
);

결과는 이렇습니다. 425ms



두번째는 sass 구문을 그대로 이용할수 있는 precss 와 postcss-scss 를 설치하고 postcss 만 돌려보았습니다.

grunt.registerTask('precssPost', [
        'postcss:prePost'
    ]
);

결과는 이렇습니다. 417ms



결론은 두번째인 'postcss:prePost' 작업이 더 빨랐습니다.

코드의 양이 작아서 별차이는 없지만 sass의 구문을 그대로 사용하면서 벤더프리픽스까지 붙여가면 작업을 하는데 sass 가 필요없었습니다.

작업결과 또한 더 빨랐습니다.

postcss 에서는 precss 말고, cssnext 를 사용하라고 합니다.

물론 더 빠르고 좋다고 설명하지요....ㅎㅎ.

이건 구문을 몰라서 아직 테스트는 안해봤지만 이제는 less, sass 를 사용하지 않고도 후처리언어인 postcss 만으로도 더 좋은 결과를 더 빨리 얻는것 같습니다.

postcss 아래쪽에 더 많은 링크들이 있습니다.

개    개