Skip to content

Instantly share code, notes, and snippets.

@kruchai

kruchai/Singularitygs + Breakpoint + Compass with Gulp

Created January 26, 2018 13:30
Show Gist options
  • Save kruchai/cfe7b96c34f3ac45d9dcf1440dd1d630 to your computer and use it in GitHub Desktop.
Save kruchai/cfe7b96c34f3ac45d9dcf1440dd1d630 to your computer and use it in GitHub Desktop.
Download ZIP
Singularitygs + Breakpoint + Compass with Gulp
Raw
Singularitygs + Breakpoint + Compass with Gulp
This is how I managed to set up Singularitygs + Breakpoint + Compass with Gulp (for Drupal theming).
Install gulp globally
"sudo npm install -g gulp"
Copy the following package.json to the root folder of your project.
{
"name": "your_project",
"version": "1.0.0",
"description": "",
"main": "gulpfile.js",
"dependencies": {
"browser-sync": "^2.9.3",
"gulp": "^3.9.0",
"gulp-autoprefixer": "^2.3.1",
"gulp-plumber": "^1.0.1",
"gulp-sass": "^2.0.4",
"gulp-sourcemaps": "^1.5.2",
"breakpoint-sass": "^2.6.1",
"compass-mixins": "^0.12.7",
"singularitygs": "^1.6.2",
"gulp-watch": "^4.3.5"
},
"devDependencies": {
"gulp-cssmin": "^0.1.7",
"gulp-image-optimization": "^0.1.3",
"gulp-sass-glob": "0.0.8",
"gulp-strip-css-comments": "^1.2.0",
"gulp-uglify": "^1.4.1",
"gulp-uncss": "^1.0.3",
"gulp.spritesmith": "^4.3.0",
"modularscale-sass": "^2.1.1",
"node-sass-globbing": "0.0.23"
},
"scripts": {},
"author": "",
"license": "ISC"
}
"cd" in the directory and run "npm install".
Second: Create and edit your gulpfile.js like this:
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
var importer = require('node-sass-globbing');
var plumber = require('gulp-plumber');
var browserSync = require('browser-sync').create();
var cssmin = require('gulp-cssmin');
var uncss = require('gulp-uncss');
var stripCssComments = require('gulp-strip-css-comments');
var uglify = require('gulp-uglify');
var imageop = require('gulp-image-optimization');
var spritesmith = require('gulp.spritesmith'); // See https://github.com/twolfson/gulp.spritesmith
var postcss = require('gulp-postcss');
var lost = require('lost');
var gcmq = require('gulp-group-css-media-queries');
var sass_config = {
importer: importer,
includePaths: [
'node_modules/breakpoint-sass/stylesheets/',
'node_modules/singularitygs/stylesheets/',
'node_modules/modularscale-sass/stylesheets',
//'node_modules/Singularity-extras/stylesheets/',
'node_modules/compass-mixins/lib/'
]
};
// Create the sprite.
// Important: Source images must not have leading numbers (e.g. 2.png -> sprite-2.png)!!!
// SASS does not support the variables that start with numbers!!!
gulp.task('sprite', function () {
var spriteData = gulp.src('images/**/*').pipe(spritesmith({
imgName: 'sprite.jpg',
cssName: '_sprite.scss',
cssFormat: 'scss',
imgPath: '../images/sprite.jpg'
}));
// Choose css destination.
var cssStream = spriteData.css
.pipe(gulp.dest('./sass'));
// Choose img destination.
return spriteData.img.pipe(gulp.dest('images'));
});
// Optimize the images.
gulp.task('images', function(cb) {
gulp.src(['images/**/*.png','images/**/*.jpg','images/**/*.gif','images/**/*.jpeg']).pipe(imageop({
optimizationLevel: 5,
progressive: true,
interlaced: true
})).pipe(gulp.dest('./images')).on('end', cb).on('error', cb);
});
// Compress javascript.
gulp.task('uglify', function() {
return gulp.src('js/*.js')
.pipe(uglify())
.pipe(gulp.dest('js_min'));
});
gulp.task('browser-sync', function() {
browserSync.init({
//injectChanges: true,
proxy: "127.0.0.1/your_project"
// If in a static site uncomment the following.
// server: {
// baseDir: "./"
// }
});
gulp.watch("sass/**/*.scss", ['sass']);
gulp.watch("css/**/*.css").on('change', browserSync.reload);
gulp.watch("js/**/*.js", ['uglify']).on('change', browserSync.reload);
});
// Compile sass.
gulp.task('sass', function () {
gulp.src('sass/**/*.scss')
.pipe(plumber())
//.pipe(sourcemaps.init())
.pipe(sass(sass_config).on('error', sass.logError))
.pipe(autoprefixer({
browsers: ['last 2 version']
}))
//.pipe(sourcemaps.write('./css'))
.pipe(stripCssComments({preserve: false}))
// .pipe(uncss({
// html: ['./html/**/*.html']
// }))
.pipe(postcss([lost()]))
.pipe(gcmq())
.pipe(cssmin())
.pipe(gulp.dest('css'));
});
gulp.task('default', [/*'images',*/ 'sass', /*'uglify',*/ 'browser-sync']);
Third: Require the following at the top in your "theme.styles.scss":
@import "compass";
@import 'modular-scale';
@import "singularitygs";
@import "singularity-extras";
@import "breakpoint";
Fourth: Don't forget to include each and every partial in your "theme.styles.scss" like this:
@import "compass";
@import 'modular-scale';
@import "singularitygs";
@import "singularity-extras";
@import "breakpoint";
@import "sass/variables/**/*.scss";
@import "sass/abstractions/**/*.scss";
@import "sass/base/**/*.scss";
@import "sass/components/**/*.scss";
// The following is to enable the debugging in Singularity.
@include sgs-change('debug', true);
If you encounter any errors with Drupal and browserSync (white screen of death), you can run this command in the root folder of your theme:
find node_modules -type f -name '*.info' | xargs rm
This removes the .info files of the node_modules, which create problems with Drupal.
See also: http://drupal.stackexchange.com/questions/126880/how-do-i-prevent-drupal-raising-a-segmentation-fault-when-using-a-node-js-themin
// Install globally with the following command. Then symlink to local project (one-line command!!!).
sudo rm -r /usr/lib/node_modules/Singularity-extras && sudo rm -r /usr/lib/node_modules/modularscale-sass && sudo git clone https://github.com/at-import/Singularity-extras.git && sudo mv Singularity-extras /usr/lib/node_modules && sudo git clone https://github.com/modularscale/modularscale-sass.git && sudo mv modularscale-sass /usr/lib/node_modules && sudo npm install -g gulp gulp-group-css-media-queries compass-mixins gulp-sass gulp-sourcemaps gulp-autoprefixer node-sass-globbing gulp-plumber browser-sync gulp-cssmin gulp-uncss gulp-strip-css-comments gulp-uglify gulp-image-optimization gulp.spritesmith gulp-sass-glob gulp-postcss lost singularitygs breakpoint-sass;
// Command for symlink.
npm link Singularity-extras singularitygs breakpoint-sass modularscale-sass gulp gulp-group-css-media-queries compass-mixins gulp-sass gulp-sourcemaps gulp-autoprefixer node-sass-globbing gulp-plumber browser-sync gulp-cssmin gulp-uncss gulp-strip-css-comments gulp-uglify gulp-image-optimization gulp.spritesmith gulp-sass-glob gulp-postcss lost;
# Script for symlinking the node modules.
#!/bin/bash
# Run this script from the root folder of your Drupal theme!!!
# Assign all the global node modules to a variable.
modules=$(ls /usr/lib/node_modules);
echo 'I am going create a node_modules folder here, and symlink all the global node modules.';
npm link $modules;
########################################################################
#!/bin/bash
if [[ $(ls /usr/lib/node_modules/Singularity-extras) ]]; then
#statements
echo "Singularity-extras exists. Removing and installing the latest version..."
sudo rm -r /usr/lib/node_modules/Singularity-extras;
fi
if [[ $(ls Singularity-extras) ]]; then
#statements
sudo rm -r Singularity-extras;
fi
# Remove the
if [[ $(ls /usr/lib/node_modules/modularscale-sass) ]]; then
#statements
echo "modularscale-sass exists. Removing and installing the latest version..."
sudo rm -r /usr/lib/node_modules/modularscale-sass;
fi
# Remove the
if [[ $(ls modularscale-sass) ]]; then
#statements
sudo rm -r modularscale-sass;
fi
# Srart installing all the node modules.
if [[ $(npm --version) != null ]]; then
#statements
echo "Nodejs is installed!!!! Proceeding...";
else
echo "Please install Nodejs first and re-run the script...";
return false;
fi
# Install all the node modules.
sudo git clone https://github.com/at-import/Singularity-extras.git && sudo mv Singularity-extras /usr/lib/node_modules && sudo git clone https://github.com/modularscale/modularscale-sass.git && sudo mv modularscale-sass /usr/lib/node_modules && sudo npm install -g gulp gulp-group-css-media-queries compass-mixins gulp-sass gulp-sourcemaps gulp-autoprefixer node-sass-globbing gulp-plumber browser-sync gulp-cssmin gulp-uncss gulp-strip-css-comments gulp-uglify gulp-image-optimization gulp.spritesmith gulp-sass-glob gulp-postcss lost singularitygs breakpoint-sass;
# Remove all info files because they drive Drupal and Drush crazy.
echo 'I am going to remove all info files because they drive Drupal and Drush crazy.';
sudo find /usr/lib/node_modules -type f -name '*.info' | xargs sudo rm;
# Assign all the global node modules to a variable.
modules=$(ls /usr/lib/node_modules);
echo 'I am going create a node_modules folder here, and symlink all the global node modules.';
npm link $modules;
echo "You are ready!!! Congrats!!!";
sudo gulp;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment