5 шагов для настройки SASS с Grunt и NodeJS для начинающих

📣 👋 Всем привет! добро пожаловать в самый первый учебник «Мелочи». Вы можете найти все основы программирования и связанные с ним, размещенные здесь каждую неделю. Никакой фигни и длинных текстов !!

Этот учебник охватывает,

✅ Настройка NodeJS с помощью Express

✅ Установка SASS

✅ Настройка задачи Watch с помощью Grunt

🎉 Готово .. !!

Шаг 1 - Установка NodeJS

Установите NodeJS в свою систему. Что такое NodeJS? - Проще говоря, JavaScript работает в вашем браузере, то есть на стороне клиента. С NodeJS он может работать даже на стороне сервера, так что вы можете использовать JS вместо PHP или любого внутреннего языка.

Https://nodejs.org/ru/download/

Загрузите версию LTS (на момент написания этого поста - 6.11.0).

Шаг 2 - Установка Express

Для следующих нескольких шагов у вас должна быть настроена папка. Перейдите в место, где вы хотите настроить папку, и откройте терминал / командную строку (Shift + щелчок правой кнопкой мыши в Windows, щелкните правой кнопкой мыши ›службы› Открыть Терминал в папке на Mac).

если вы не видите ни одной опции на Mac, зайдите в Системные настройки, выберите Клавиатура ›Ярлыки› Службы и попробуйте повторить описанный выше шаг еще раз.

В терминале введите -

npm install express-generator -g
express foldername

затем перейдите в папку, которую вы только что создали на предыдущем шаге, с помощью

cd foldername

и введите

npm install

в основном это установит все необходимые пакеты, которые потребуются нашему приложению (вы можете найти их в node_modules). Вы можете добавлять любые пакеты в приложение с помощью npm.

Вы завершили настройку своего сервера. Вы можете проверить это, запустив

npm start

и откройте localhost:3000 в своем браузере.

Шаг 3 - Установка SASS

SASS - Syntactically Awesome StyleSheets - это предварительный компилятор CSS. который дает дополнительные возможности, такие как использование переменных, наследования, миксинов, вложенных правил и т. д. в CSS. Это в интересах разработчика, и ваш код SASS будет окончательно преобразован в CSS.

SASS нужен РУБИН, если у вас нет РУБИНА, сначала установите его отсюда

Www.ruby-lang.org/en/documentation/installation/

и выберите тип вашей ОС. Если вы используете Windows, нажмите ниже и загрузите файл. exe

Https://rubyinstaller.org

Теперь откройте терминал и введите

gem install sass 
--or--
sudo gem install sass 
(use if you get any permission(s) related error message, but I won't suggest this)

установить SASS. SASS - это рубиновый драгоценный камень, поэтому мы используем gem вместо npm.

Шаг 4 - Установка Grunt и его зависимостей

Отлично, мы почти завершили настройку. Теперь давайте установим Grunt и его зависимости.

Что такое GruntJS? -

Как фронтенд-разработчик, вам, возможно, придется решать множество задач, например:

Работая над маленьким фрагментом JS и CSS и объединяя их в один файл,
Оптимизация изображения
Сжатие CSS и минификации JS
Использование препроцессоров CSS, таких как SASS

и этот список можно продолжать. Grunt поможет вам автоматизировать эту задачу.

Введите это в свой терминал

npm install grunt

Создайте файл style.sass в своем / public / stylesheets / и создайте файл gruntfile.js в своем корневом каталоге и вставьте следующий код и сохраните его.

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        express : {
            dev: {
                options: {
        script: 'app.js'
      }
            }
        },
        sass: {
            dist: {
                files: {
                    'public/stylesheets/style.css' : 'public/stylesheets/style.sass'
                }
            }
        },
        watch: {
            css: {
                files: '**/*.sass',
                tasks: ['sass']
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-express-server');
    grunt.registerTask('dev',['express','sass','watch']);
}

это может показаться сложным, но это очень просто для понимания. Пишем функцию

который считывает зависимости из package.json
Мы используем пакеты grunt, такие как SASS, для преобразования файла style.sass в папку style.css , наблюдайте за изменениями файлов в SASS и запустите задачу компиляции SASS и express для запуска сервера. и все эти задачи зарегистрированы под dev (вы можете использовать любое другое имя). так что когда ты бежишь

grunt dev

все три задачи, упомянутые выше, будут выполняться автоматически. Точно так же вы также можете настроить задачу минификации для автоматической минимизации вашего CSS или JS, что сэкономит вам много времени.

мы должны установить необходимые пакеты grunt для трех обсуждаемых выше задач. Запустите в своем терминале следующее

npm install grunt-contrib-sass && npm install grunt-contrib-watch && npm install grunt-express-server

Мы устанавливаем сразу все три пакета с помощью &&.

Отличная работа!! вы настроили свою среду для использования SASS с npm.

Шаг 5 - Написание простого кода SASS

давайте сначала посмотрим, как выглядит ваша веб-страница, запустите эту команду в своем терминале

grunt dev

и откройте localhost:3000, он должен выглядеть примерно так

Это обслуживается из файла index.jade внутри из views /. откройте его и посмотрите структуру

В нем всего два компонента: ‹h1› и ‹p›. Итак, давайте создадим для них стиль, откроем файл style.sass и создадим для них стиль. Вот как выглядит мой код,

body
    padding: 50px
    font: 14px "Lucida Grande", Helvetica, Arial, sans-serif
    background-color: floralwhite
    text-align: center
  
h1
    margin: auto
    color: cadetblue
    text-decoration: overline
p 
    color: #333
    font-size: 20px

и просмотрите изменения в вашем браузере.

Потрясающе, не правда ли?

при желании вы можете найти исходный код здесь.

Спасибо, что прочитали мой пост. Хотелось бы услышать ваши мысли в комментариях. Если вам понравилась статья, нажмите ниже, чтобы ее прочитало больше людей.

5 шагов для настройки SASS с Grunt и NodeJS для начинающих