Как правильно использовать grunt js?

Question

[Виктор]

Добрый день.

Недавно познакомился с grunt. Как я понял, эта вещь нужна для того чтобы склеить несколько файлов, минифицировать их, и выложить на продакшн (ну, как одно из основных предназначений утилиты).

Вот я использую MVC-шный PHP фреймворк. Создаю несколько вьюшек, и для каждой вьюшки у меня есть определенный набор подключаемых файлов. Для всех вьюшек я использую общие скрипты, типа bootstrap.js, и для каждой вьюшки отдельно использую какие-то свои файлы (view1.js, view2.js)

В статьях которые находил по grunt приводились пример как все склеить в один файл. А правильно ли будет для каждой вьюшки создавать конфиг в модуле concat? Ну вот пример моего использования:

module.exports = function(grunt) {
    var commonScripts = [
        'public/bower-modules/jquery/dist/jquery.js',
        'public/bower-modules/bootstrap/dist/js/bootstrap.js'
    ];

    grunt.initConfig({
        concat: {
            options: {
                separator: "\n"
            },

            index: {
                src: commonScripts.concat([
                    'public/bower-modules/bxslider-4/jquery.bxslider.js',
                    'public/src/js/views/public.index.js'
                ]),

                dest: 'public/assets/js/public.index.js'
            },

            singlePage: {
                src: commonScripts.concat([
                    'public/bower-modules/SyntaxHighlighter/scripts/XRegExp.js',
                    'public/bower-modules/SyntaxHighlighter/scripts/shCore.js',
                    'public/bower-modules/SyntaxHighlighter/scripts/shAutoloader.js',
                    'public/src/js/views/public.pages.single.js'
                ]),

                dest: 'public/assets/js/public.pages.single.js'
            }
        },

        watch: {
            mainLayout: {
                files: ['public//src/js/**/*.js'],
                tasks: ['concat:index']
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-watch');
}

То есть если есть 10 страниц, то будет 10 переменных в concat для каждой страницы.

Но так для каждой вьюшки прописывать - конфиг разрастется. Или так и делают? Один файл на все делать не хочется, ибо там будет 20 либ (графики всякие и т.д.) и че их грузить все время.

Соответственно у меня есть две папки для js. Файлы я именую одинакого, например public.pages.single.js. В одной папке (src) исходники для вьюшки, в другой - то что получается путем склеивания либ и файла из src.

Answer 1

[Сергей Протько]

grunt это в первую очередь менеджер тасков и система сборки. Конкатенация и т.д. это задача плагинов. Сам по себе грант умеет только таски запускать. Это дело можно make-ом заменить и будет тоже самое.

Вообще если я правильно вас понял, то у вас какая-то странная логика. Обычно фронтэнд он фронтэнд. Делить его можно только на модули но никак не на страницы. Если у вас фронтэнд код настолько независим - то ладно. но обычно это не так, и скрипты с одной страницы присутствуют и на большинстве других. Таким образом исходя из задачи можно разбить скрипты на модули и объеденять все именно так.

А еще есть gulp у которого нету таргетов из коробки. И я бы рекомендовал вам брать его так как сложнее будет сотворить треш.

Answer 2

[Виктор]

Я еще видимо не дорос до уровня джежая фронтенда. У меня просто прикладные задачи, типа, вывести графики на страницу, или валидацию форм сделать. При этом я просто подключаю js-ники там где нужно.

Я не умею работать с js на уровне модульности. Просто гружу, скажем, jquery/bootstrap/google charts и рисую графики. На другой странице гружу jquery/bootstrap/validation и делаю валидацию. И т.д.

Хотелось бы их минифицировать и сделать 1 файл вместо того чтобы грузить несколько

Comments

[Максим Дунаевский]

Grunt лучше использовать для написания JS-кода, когда, например, Вы пишете большую библиотеку на JS, состоящую из множества модулей. Если Вы просто вставляете скрипты на страницу, то используйте минифицированные версии этих же скриптов - легче будет отлаживать всё это дело.