feat: move essays of 2014

2026-02-04 04:25:28 +00:00 · 2023-06-04 11:40:57 +02:00
parent 79a2b6e94a
commit 2886aafbf9
25 changed files with 2831 additions and 3 deletions
--- a/src/content/journal/2014/gulp-tutorial-4-css-generation-sass.mdx
+++ b/src/content/journal/2014/gulp-tutorial-4-css-generation-sass.mdx
@@ -0,0 +1,107 @@
+---
+title: "Introduction to Gulp.js 4: Creating CSS with Sass and Compass"
+slug: gulp-tutorial-4-css-generation-sass
+author: Stefan Imhoff
+date: 2014-10-21T10:30:00+02:00
+description: "The ultimate tutorial and guide for Gulp.js: How to create CSS and Source Maps with Sass and Compass."
+cover: /assets/images/cover/gulp.svg
+tags: ["code"]
+series: gulp
+---
+
+This is the 4th part of my series, _Introduction to Gulp.js_. Today I will show how to use Sass (and Compass if you want) to create CSS files. Furthermore, I will add vendor prefixes with Autoprefixer and create Source Maps for easier debugging of the Sass files.
+
+## Sass and Autoprefixer
+
+I use [Sass](http://sass-lang.com/) as a preprocessor for my CSS files. If you like to use [Compass](http://compass-style.org/), you have to set an option for this task.
+
+Go ahead and install the npm modules needed:
+
+```bash
+$ npm install --save-dev gulp-plumber@1.0.1 gulp-ruby-sass@2.0.4 gulp-filter@3.0.1 gulp-changed@1.0.0 gulp-autoprefixer@3.0.2 gulp-sourcemaps@1.6.0
+```
+
+That’s a lot, but this task will do a lot.
+
+#### gulp/config.js
+
+```javascript
+sass: {
+  src:  srcAssets + '/scss/**/*.{sass,scss}',
+  dest: developmentAssets + '/css',
+  options: {
+    noCache: true,
+    compass: false,
+    bundleExec: true,
+    sourcemap: true
+  }
+},
+autoprefixer: {
+  browsers: [
+    'last 2 versions',
+    'safari 5',
+    'ie 8',
+    'ie 9',
+    'opera 12.1',
+    'ios 6',
+    'android 4'
+  ],
+  cascade: true
+}
+```
+
+#### gulp/task/development/sass.js
+
+```javascript
+var gulp = require("gulp");
+var plumber = require("gulp-plumber");
+var browsersync = require("browser-sync");
+var sass = require("gulp-ruby-sass");
+var gulpFilter = require("gulp-filter");
+var autoprefixer = require("gulp-autoprefixer");
+var sourcemaps = require("gulp-sourcemaps");
+var config = require("../../config");
+
+/**
+ * Generate CSS from SCSS
+ * Build sourcemaps
+ */
+gulp.task("sass", function () {
+	var sassConfig = config.sass.options;
+
+	sassConfig.onError = browsersync.notify;
+
+	// Don’t write sourcemaps of sourcemaps
+	var filter = gulpFilter(["*.css", "!*.map"], { restore: true });
+
+	browsersync.notify("Compiling Sass");
+
+	return sass(config.sass.src, sassConfig)
+		.pipe(plumber())
+		.pipe(sourcemaps.init())
+		.pipe(autoprefixer(config.autoprefixer))
+		.pipe(filter) // Don’t write sourcemaps of sourcemaps
+		.pipe(
+			sourcemaps.write(".", {
+				includeContent: false,
+				sourceRoot: "app/_assets/scss",
+			})
+		)
+		.pipe(filter.restore) // Restore original files
+		.pipe(gulp.dest(config.sass.dest));
+});
+```
+
+I load all my files with the suffix of `*.sass` or `*.scss`. First, I pipe the files through _Plumber_. It will keep Gulp.js running if I create a syntax error in one of my files. It would normally crash with an error. The next step creates the CSS files, running the `sass` command. I create source maps and finally put the CSS files to their destination.
+
+And I run the CSS files through Autoprefixer, which will add vendor prefixes. I used the Mixins of Compass a long time, but stopped now and write pure CSS. All vendor prefixes are added later for the browsers I want to support.
+
+You might have guessed: If you wish to use Compass, set the option `compass` to `true`.
+
+## Conclusion
+
+This concludes the 4th part of my series, _Introduction to Gulp.js_. We learned how to keep Gulp.js running, even when we produce errors, how to preprocess SCSS files with Sass, create Source Maps, and add vendor prefixes to the CSS files.
+
+<Figure>
+	<MoreLink href="https://github.com/kogakure/gulp-tutorial" text="View Source on GitHub" />
+</Figure>