Je connais Sass et Gulp et leurs avantages, mais je ne sais pas comment les utiliser

Évidemment, je sais qu'ils ont besoin de git, mais c'est là que ma connaissance s'arrête.

Disons que j'ai un fichier .scss que j'ai édité et que je veux le compiler et le placer sur mon serveur distant pour voir à quoi il ressemble. Et maintenant?

Il existe très peu d'informations sur la manière de procéder. Même chose avec Gulp.

J'ai l'impression qu'il me manque une sorte d'intermédiaire ici.

Est-ce que quelqu'un peut-il me montrer la bonne direction?

1. Installez Node.js
2. Installez Gulp globalement avecnpm install gulp-cli --global
3. Créez un nouveau répertoire pour vos tâches Gulp et vos fichiers Sass
4. Dans ce dossier, initialisez npm avecnpm init
5. Installez Gulp et Sass avec npm install gulp gulp-sass --save-dev
6. Créez un gulpfile.jsavec le contenu suivant:

var gulp = require ('gulp')

var sass = require ('gulp-sass')

gulp.task ('scss', function () {
  gulp.src ('scss / main.scss')
  .pipe (sass ())
  .pipe (gulp.dest ('./ build / css'))
})

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

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

7. Créez un dossier appelé scssavec un fichier appelémain.scss
8. Vous pouvez maintenant le construire avec gulpet le regarder avecgulp watch

Je vous recommande d'utiliser également PostCSS avec cssnext pour le préfixage automatique et gulp -clean-css pour réduire votre CSS. Pour l'utiliser, vous devez faire les choses suivantes:

1. Installez-les avec npm install gulp-postcss postcss-cssnext gulp-clean-css --save-dev
2. Changez votre gulpfile.jspour ce qui suit:

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 ('scss / main.scss')
  .pipe (sass ())
  .pipe (postcss ([cssnext ()]))
  .pipe (cleancss ())
  .pipe (gulp.dest ('./ build / css'))
})

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

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

Je vous recommande également de lire ceci pour en savoir plus sur les bascis Sass.

Certains sites Web proposent des vidéos expliquant comment utiliser divers composants de développement Web. Voici une liste alphabétique des lieux, où l'on peut regarder une série de vidéos sur divers sujets de programmation:

1. https://www.codeschool.com
2. https://www.lynda.com
3. https://www.khanacademy.org
4. https://www.youtube.com (recherchez simplement Git ou Gulp, développement Web, etc ...)

Pour Git , vous voudrez aller chercher l'un de ces logiciels car ils ont des interfaces graphiques visuelles:

1. GitHub
2. SmartGit
3. Atlassian SourceTree

L'interface CLI (Command Line Interface) est davantage destinée aux utilisateurs expérimentés. Au moins, vous pouvez commencer à apprendre comment Git fonctionne, en regardant comment fonctionne la ramification et la fusion. Voici la page officielle sur le fonctionnement de Git Branching . Les illustrations aideront à comprendre les étiquettes / étiquettes de branche utilisées par le logiciel. Ce n'est pas un processus facile à apprendre sur Git ... mais avec un peu de travail et de patience, vous pouvez le prendre comme une compétence pour votre compétence.

Saas est un système de construction flexible pour les fichiers CSS. Il vous permet d'ajouter un peu de logique à vos fichiers CSS en tant que modèles et de faciliter la modification de certaines valeurs au moment de la construction. Un exemple est où vous voulez changer une couleur de police pour un grand nombre d'éléments, la méthode précédente consistait à parcourir le fichier CSS et à changer chaque règle CSS séparément et pourrait prendre beaucoup de temps, une nouvelle méthode avec Saas si vous l'utilisez est de spécifiez la valeur dans le fichier .scss en tant que variable et pour la définir en haut du document ou via une configuration, puis lorsque vous créez les fichiers .scss en fichiers .css, les variables sont remplacées par la valeur qu'elles représentent. ( http://sass-lang.com/ )

Gulp n'est qu'un système d'automatisation de construction. Gulp peut être utilisé à partir d'un certain nombre d'IDE et d'un large éventail de langues et est commercialisé comme une boîte à outils pour aider à automatiser les tâches fastidieuses dans le flux de travail de développement. ( http://gulpjs.com/ )