Как я использую Gruntjs

Апрель 07, 2013 ||  kak-to-tak ||  комментарии

Если вы верстальщик и ни дай бог пользуетесь CSS препроцессором, например как я, Stylus, то встает вопрос как поудобнее компилировать css. Хотя речь не только о препроцессорах для css, я например, пользуюсь иногда Jade, иногда Coffescript.

Способов много, я верстаю в Sublime Text, и первым делом пытался настроить компиляцию прямо в редакторе. В sublime для этого есть Build Systems. Все хорошо, но не идеально. Иногда нужно чтобы при изменении одного файла процессился другой и тому подобное.

Когда я понял что внутри sublime у меня не получается решить задачу я попытался найти какой то другой способ. Может программулину какую. И тут не все хорошо. Для Мака есть Codekit, который скопом решает кучу таких задач. Есть Livereload, но он в альфа-бете-чтонибудь-не-работает годами. Для Less есть куча отличных решений – SimpLESS, WinLess. Не искал но думаю для Sass есть хорошие решения виндовые, а вот для Stylus нет, ну или не нашел.

Не так давно появился некто mixture, о котором ничего сказать не могу, смутило только то что там по умолчанию предлагается темплейтный движок Liquid, которого я не знаю и не очень надо.

Поэтому я остановился на Gruntjs. Я не спец по JS, не спец по nodejs, для меня работа с командной строкой ассоциируется с Аристотелем или еще чем то более древним и ненужным ) Но по всему было похоже что gruntjs позволяет решать все задачи как я хочу.

А что собственно за задачи? Задачи такие:

  • Компилить stylus, jade, coffescript при изменении
  • Позволять задавать пути исходников и конечных файлов как мне заблагорассудится
  • Желательно при измении определенных файлов рефрешить браузер

Второй пункт важный потому что иногда приходится брать готовый проект с уже заданной структурой папок.

Я не буду описывать как инсталлировать gruntjs, а приведу пример как я его настроил для себя. Тем более что я особо и не понимаю, я всего лишь прочел пошаговую инструкцию )

Мой темплейт проекта под GruntJs. Предполагаю что уже установлен nodejs и grunt. Для старта вам нужно всего два файла, package.json и Gruntfile.js

Я опускаю все детали содержимого Gruntfile.js, только то, что нужно для настройки. Запись вида

jshint: {
    …
},

p означает что это таск с названием jshint и делает то что описано в обьекте.

jshint

jshint: {
    files: ['gruntfile.js'],
        options: {
        // options here to override JSHint defaults
        globals: {
            jQuery: true,
            console: true,
            module: true,
            document: true
        }
    }
},

Этот таск проверяет файл gruntfile.js на ошибки, очень полезно от кривых рук.

jade

jade: {
    work: {
        options: {
            pretty: true
        },
        files: {
            "public/index.html": ["source/index.jade"]
        }
    },
    all: {
        options: {
            pretty: false
        },
        files: {
            "public/index.html": ["source/index.jade"],
            "public/about.html": ["source/about.jade"]
        }
    }
},

Компиляция Jade, два подтаска (jade:work, jade:all) для компиляции конкретного файла над которым работаешь в данный момент, и для компиляции всех файлов в проекте. Это нужно когда вы изменили общий инклуд, например шапку или футер. files – пути для исходников и результата.

stylus

stylus: {
    compile: {
        options: {
            compress: false,
            paths: [
                'source/css/basic/',
                'source/css/libs/',
                'source/css/libs/nib/',
                'source/css/modules/',
                'source/css/plugins/']
        },
        files: {
            'public/css/styles.css': 'source/css/index.styl'
        }
    }
},

coffee

coffee: {
    compile: {
        options: {
            bare: true
        },
        files: {
            'public/js/script.js': 'source/js/script.coffee'
            'path/plugins.js': ['path/to/sources/*.coffee', 'path/to/more/*.coffee']
        }
    }
},

Процессинг кофескрипта, позволяет обьединять при процессинге.

watch

watch: {
    scripts: {
        files: ‘source/js/**/*.coffee’,
        tasks: ['coffee'],
        options: {
            debounceDelay: 250
        }
    },
    jade: {
        files: ‘source/\*.jade’,
        tasks: ['jade:work'],
        options: {
            debounceDelay: 250
        }
    },
    jadelayouts: {
        files: ‘source/_\*.jade’,
        tasks: ['jade:all'],
        options: {
            debounceDelay: 250
        }
    },
    stylus: {
        files: ‘source/css/**/*.styl’,
        tasks: ['stylus'],
        options: {
            debounceDelay: 250
        }
    }
},

Таск “слежения” за файлами. Например watch:stylus – при изменении любых файлов stylus в папке source/css/ выполняется таск stylus.

livereload

livereload: {
    options: {
        base: ‘public’
    },
    files: ['public/**/*']
},

Рефреш браузера когда меняются файлы, для Хрома должен быть установлен плагин livereload base – корень сайта, files – файлы которые должны инициировать рефреш.

connect

connect: {
    server: {
        options: {
            hostname: ‘localhost’,
            port: 9001,
            base: ‘public/’
        }
    }
}

Вебсервер который запускается в папке проекта, для удобства работы. Хост и порт можно настроить какой угодно.

Регистрация таска

grunt.registerTask(‘default’, ['jshint', 'connect', 'livereload','watch']);

Дефолтный таск запускается по дефолту при запуске gruntjs, можно создать любой другой набор тасков по такой же схеме.

Поехали

Теперь в папке проекта выполняем grunt.cmd(для винды, для линукса просто grunt). И вкалываем.

Если все прошло без ошибок то после запуска cmd будет выглядеть так:

grunt-cmd
grunt-cmd

Github

По теме:
comments powered by Disqus