От новичка до гуру: Курсы программирования на CyberDuff

Как минимизировать файлы css с помощью RequireJS

У меня есть магистральный проект с несколькими файлами js и парой файлов css.

Я бы хотел, чтобы они были минимизированы до одного js и одного css.

До сих пор мне удалось объединить и минимизировать все мои js-файлы в один файл main.min.js.

Теперь я пытаюсь сделать то же самое с файлами css.

это мой макет:

css
  bootstrap.css
  docs.css
  ...
js
  optimize-node (script to run the optimizer)
  app
    main.js (entry point of my app)
    require-main.js
index.html

это мой скрипт для его минимизации

# optimize-node
node ../../r.js -o baseUrl=. mainConfigFile=app/require-main.js

это мой require-main.js

/*globals require*/
'use strict';
// Set the require.js configuration file for your application
require.config({

  // uncomment to create a single file with no optimization at all
  // optimize: 'none',
  baseUrl: 'js',

  // Initialize the application with the main application file
  deps : ['app/main'],

  preserveLicenseComments: false,

  out  : 'main.min.js',
  name : 'app/main',

  paths: {
    // Embed require in main.min
    'requireLib' : 'lib/require.min',

    // Libraries
    jquery       : 'lib/jquery-1.10.1',
    jqueryui     : 'lib/jquery-ui-1.8.21.custom',
    moment       : 'lib/moment-2.0.0',
    datepicker   : 'lib/bootstrap-datepicker-1.0.1',

    [...]
  },
  include : ['requireLib'],
  shim: {
    lodash: {
      exports: '_'
    },
    backbone: {
      deps    : ['lodash', 'jquery'],
      exports : 'Backbone'
    },
    [...]
  }
});

с этой конфигурацией, когда я запускаю оптимизацию-узел, все работает отлично, и создается файл js/app/main.min.js

Теперь я пытаюсь изменить конфигурацию для создания этого файла, а также файла css/main.min.css с конкатенированным и минимизированным содержимым css/*.css.

Я попытался заменить эти строки

// single file optimization
out  : 'main.min.js',
name : 'app/main',

с этой конфигурацией, чтобы определить два модуля, один для js и другой для css

// multiple file optimization
dir: '../../build',
appDir: '../',
modules: [
  {
    name: 'app/main',
    include: ['app/main']
  }
],

Но это не работает, как ожидалось

Весь мой проект копируется в ../../build, и каждый файл оптимизируется

И я не знаю, как добавить еще один модуль, который бы просто ковырял файлы css

Возможно, мне следует создать файл require-css.js, который просто позаботится о файлах css/*.css.

Может ли кто-нибудь помочь мне с этим? Я думаю, это должен быть довольно распространенный сценарий


Ответы:


1

r.js так не работает: (из документации)

В RequireJS есть инструмент оптимизации, который делает следующее:

(...)

Оптимизирует CSS, встраивая файлы CSS, на которые ссылается @import, и удаляя комментарии.

Вам нужно будет создать одну «главную» таблицу стилей, которая ссылается на отдельные файлы CSS через @import, нет возможности конкатенации *.css в указанной папке.

03.06.2013

2

Есть несколько простых шагов:

  1. (метод 1 предпочтительнее) Создайте файл style.css, объединив все файлы CSS в один.

    cat css/firstfile.css css/secondfile.css > style.css

    (метод 2) Создайте файл style.css и @import скопируйте в него все остальные CSS-файлы.

    @import url("css/firstfile.css");

    @import url("css/secondfile.css");

  2. Создайте файл build.js следующим образом:

    ({ cssIn: './css/style.css', out: './css/style.min.css', optimizeCss: 'default' })

  3. Используя require.js, уменьшите этот файл

    r.js -o build.js

  4. Измените свой index.html, чтобы включить только этот уменьшенный файл style.min.css.

    <link rel="stylesheet" type="text/css" href="css/style.min.css">

ПРИМЕЧАНИЕ

Причина, по которой метод 1 предпочтительнее, заключается в том, что если вы используете import файлы CSS, которые импортируются как «ссылка», и браузеру все равно приходится делать отдельные вызовы для их извлечения, но если вы объединяете все файлы, это один единственный CSS, и он будет передавать и гзип лучше.

20.09.2013
  • На самом деле нет необходимости переименовывать минифицированный файл (например, style.css -> style.min.css), r.js может встраивать содержимое на месте. Таким образом, index.html может ссылаться на одно и то же имя таблицы стилей в разработке и производстве. 25.04.2014
  • Можете ли вы рассказать об этом подробнее? 26.04.2014

  • 3

    RequireJS может минимизировать файлы CSS.

    Все, что вам нужно сделать, это использовать эту опцию:

    optimizeCss: 'default'
    
    09.11.2014
  • не работает, мы, вероятно, должны указать cssIn, но тогда как это будет работать для нескольких файлов CSS, это другой вопрос. 15.04.2015

  • 4

    Вы можете получить аналогичный эффект, сначала добавив в свой проект «require-css» (проще всего через Bower), а затем используйте следующую конструкцию в вашем main.js или gruntfile.js:

    shim:{
     'app/my.module': {
                deps:[
                    "css!app/css/app.css"
                ]
            }
    }
    

    После этого оптимизатор r.js минифи и объединит вашу зависимость css в выходной файл js.

    13.03.2015
    Новые материалы

    Путь AWS  — «Изучение машинного обучения — 10 начинающих ИИ и машинного обучения на AWS».
    Универсальный ресурсный центр для изучения искусственного интеллекта и машинного обучения. НОЛЬ или ГЕРОЙ, начните свое путешествие здесь. Получите решения и пройдите обучение у экспертов AWS...

    5 простых концепций Python, ставших сложными
    #заранее извините 1) Переменные x = 4 y = 5 Переменная в Python — это символическое представление объекта. После присвоения некоторого объекта переменной Python мы приобретаем..

    «Освоение вероятности: изучение совместной, предельной, условной вероятности и теоремы Байеса —…
    Виды вероятности: Совместная вероятность Предельная вероятность Условная вероятность Диаграмма Венна в вероятностях: В “Set Theory” мы создаем диаграмму Венна...

    Основы Spring: Bean-компоненты, контейнер и внедрение зависимостей
    Как лего может помочь нашему пониманию Когда мы начинаем использовать Spring, нам бросают много терминов, и может быть трудно понять, что они все означают. Итак, мы разберем основы и будем..

    Отслеживание состояния с течением времени с дифференцированием снимков
    Время от времени что-то происходит и революционизирует часть моего рабочего процесса разработки. Что-то более забавное вместо типичного утомительного и утомительного процесса разработки. В..

    Я предполагаю, что вы имеете в виду методы обработки категориальных данных.
    Я предполагаю, что вы имеете в виду методы обработки категориальных данных. Пожалуйста, проверьте мой пост Инструментарий специалиста по данным для кодирования категориальных переменных в..

    Игра в прятки с данными
    Игра в прятки с данными Я хотел бы, чтобы вы сделали мне одолжение и ответили на следующие вопросы. Гуглить можно в любое время, здесь никто не забивается. Сколько регионов в Гане? А как..