Я знаю о Sass и Gulp и их преимуществах, но я понятия не имею, как на самом деле их использовать

Очевидно, я знаю, что они требуют мерзавца, но на этом мои знания заканчиваются.

Скажем, у меня есть файл .scss, который я отредактировал, и я хочу скомпилировать его и разместить на своем удаленном сервере, чтобы посмотреть, как он выглядит. Что теперь?

Существует очень мало информации о том, как на самом деле это сделать. То же самое с глотком.

Я чувствую, что мне не хватает какого-то посредника здесь.

Может кто-то указать мне верное направление?

1. Установить Node.js
2. Установите Gulp глобально сnpm install gulp-cli --global
3. Создайте новый каталог для ваших задач Gulp и файлов Sass
4. Внутри этой папки инициализируйте npm с помощьюnpm init
5. Установите Gulp и Sass с npm install gulp gulp-sass --save-dev
6. Создайте gulpfile.jsсо следующим содержанием:

var gulp = require ('gulp')

var sass = require ('gulp-sass')

gulp.task ('scss', function () {
  gulp.src ( 'СКС / main.scss')
  .pipe (Sass ())
  .pipe (gulp.dest (»./ сборки / CSS'))
})

gulp.task ('default', ['scss'])

gulp.task ('watch', function () {
  gulp.watch ('scss / ** / *. scss', ['scss'])
})

7. Создайте папку scssс именем файлаmain.scss
8. Теперь вы можете построить его gulpи смотреть сgulp watch

Я рекомендую вам также использовать PostCSS с cssnext для автофиксации и gulp -clean-css для минимизации вашего CSS. Для этого вам нужно сделать следующее:

1. Установите их с npm install gulp-postcss postcss-cssnext gulp-clean-css --save-dev
2. Измените свой gulpfile.jsна следующее:

var gulp = require ('gulp')

var cssnext = require ('postcss-cssnext')
var cleancss = require ('gulp-clean-css')
var postcss = require ('gulp-postcss')
var sass = require ('gulp-sass')

gulp.task ('scss', function () {
  gulp.src ( 'СКС / main.scss')
  .pipe (Sass ())
  .pipe (postcss ([cssnext ()]))
  .pipe (cleancss ())
  .pipe (gulp.dest (»./ сборки / CSS'))
})

gulp.task ('default', ['scss'])

gulp.task ('watch', function () {
  gulp.watch ('scss / ** / *. scss', ['scss'])
})

Я также рекомендую вам прочитать это, чтобы узнать о Sass Bascis.

Есть несколько сайтов, на которых есть видео о том, как использовать различные компоненты веб-разработки. Вот алфавитный список мест, где можно посмотреть серию видео на различные темы программирования:

1. https://www.codeschool.com
2. https://www.lynda.com
3. https://www.khanacademy.org
4. https://www.youtube.com (просто выполните поиск Git или Gulp, веб-разработки и т. д.)

Для Git вы захотите получить один из этих кусков программного обеспечения, поскольку они имеют визуальный графический интерфейс:

1. GitHub
2. SmartGit
3. Atlassian SourceTree

CLI (интерфейс командной строки) больше подходит для опытных пользователей. По крайней мере, вы можете начать изучать, как работает Git, посмотрев, как работает ветвление и слияние. Вот официальная страница о том, как работает Git Branching . Иллюстрации помогут понять метки / метки веток, которые использует программное обеспечение. Это не простой процесс, чтобы узнать о Git ... но с некоторой работой и терпением, вы можете выбрать его как навык для вашего набора навыков.

Saas - это гибкая система сборки для файлов CSS. Это позволяет вам добавить немного логики в ваши CSS-файлы в качестве шаблонов и упростить изменение определенных значений во время сборки. Одним из примеров является то, что вы хотите изменить цвет шрифта для большого количества элементов. Предыдущий метод состоял в том, чтобы просмотреть файл CSS и изменить каждое правило CSS по отдельности, что может занять много времени, новый метод с Saas, если вы используете его, это укажите значение в файле .scss в качестве переменной и определите его в верхней части документа или с помощью конфигурации, затем при сборке файлов .scss в файлы .css переменные заменяются значением, которое они представляют. ( http://sass-lang.com/ )

Gulp - это просто система автоматизации сборки. Gulp может использоваться в нескольких средах IDE и на разных языках и продается как инструментарий, помогающий автоматизировать трудоемкие задачи в процессе разработки. ( http://gulpjs.com/ )