I'm trying to get the above combination working but am unable to. I have tried the following combinations:
1)
var sass = require('gulp-ruby-sass');
gulp.task('sass',function () {
gulp.src('_scss/main.scss')
.pipe(sass({
loadPath: ['_scss'],
style: "compressed",
trace: true,
sourcemap: true,
sourcemapPath: "../../../_scss",
noCache: true,
require: ['sass-media_query_combiner']
}))
2)
var sass = require('gulp-ruby-sass');
var cmq = require('gulp-combine-media-queries');
var cssmin = require('gulp-cssmin');
gulp.task('sass',function () {
gulp.src('_scss/main.scss')
.pipe(sass({
loadPath: ['_scss'],
style: "nested",
trace: true,
sourcemap: true,
sourcemapPath: "../../../_scss",
noCache: true
}))
.pipe(cmq())
.pipe(cssmin())
3) I also tried using gulp-sass + gulp-combine-media-queries + gulp-minify-css + gulp-sourcemaps
Before moving to Gulp, I was using this build command in ST2:
"cmd": ["sass", "--update", "${project_path}/web/_scss/main.scss:${project_path}/web/resources/css/main.css", "--stop-on-error", "--no-cache", "--style", "compressed","-r","sass-media_query_combiner"],
link to question on reddit, also sass-media_query_combiner and gulp-ruby-sass
".pipe(cmq())" should be before ".pipe(gulp.dest())"
gulp.task('sass', function() {
return gulp.src("./*.scss")
.pipe(sass())
.pipe(cmq())
.pipe(gulp.dest(".css/"))
.pipe(reload({stream: true}))
});
Related
I'm beginner with Foundation and Sass. I understand slowly how it works. The workflow seems great, but here's my "issue".
When my SCSS is compiled, my CSS minifies as soon as I save my .scss file.
I've tried to turn off the Gulp task, but it didn't do anything.
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var sassPaths = [
'bower_components/normalize.scss/sass',
'bower_components/foundation-sites/scss',
'bower_components/motion-ui/src'
];
gulp.task('sass', function() {
return gulp.src('scss/*.scss')
.pipe($.sass({
includePaths: sassPaths,
// outputStyle: 'compressed'
})
.on('error', $.sass.logError))
.pipe($.autoprefixer({
browsers: ['last 2 versions', 'ie >= 9']
}))
.pipe(gulp.dest('css'));
});
gulp.task('default', ['sass'], function() {
gulp.watch(['scss/**/*.scss'], ['sass']);
});
Any ideas?
From looking at your task their shouldn't be any part of it that is minifying your css. A couple of things you could try:
1) Try outputStyle: 'expanded'
2) Try compiling your sass without including any of the bower sass files, as one of them could already be minified (although unlikely). Or even just check those manually.
3) Or finally try this configuration:
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var sassPaths = [
'bower_components/normalize.scss/sass',
'bower_components/foundation-sites/scss',
'bower_components/motion-ui/src',
'scss/*.scss'
];
gulp.task('sass', function() {
return gulp.src(sassPaths)
.pipe($.sass({
outputStyle: 'expanded'
})
.on('error', $.sass.logError))
.pipe($.autoprefixer({
browsers: ['last 2 versions', 'ie >= 9']
}))
.pipe(gulp.dest('css'));
});
gulp.task('default', ['sass'], function() {
gulp.watch(['scss/**/*.scss'], ['sass']);
});
I try to use sourcemaps for my scss files. But when I inspect an element in the browser, the sourcemap points to a wrong file. I can't find what is causing this issue.
gulp.task('sass', function(){
return gulp.src('./themes/custom/' + project + '/scss/style.scss')
.pipe(sourcemaps.init())
.pipe(sass({
includePaths: [
bourbon,
config.bowerDir + '/bootstrap-sass/assets/stylesheets',
config.bowerDir + '/font-awesome/scss'
],
style: 'compressed',
quiet: true,
}).on('error', function (err) {
sass.logError(err);
this.emit('end');
}))
.pipe(concat('style.css'))
.pipe(cleanCSS())
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./themes/custom/' + project + '/css'))
});
I am trying to setup sass in my laravel project, I have made a folder resources/assets/sass, installed npm modules, but nothing gets copied to public/css folder so when I open my page I get the error in the console:
Failed to load resource: the server responded with a status of 404
(Not Found)
And when I run gulp it opens up in the browser the folder structure of public folder.
How exactly should I set it up?
This is my gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var include = require('gulp-include');
var watch = require('gulp-watch');
var batch = require('gulp-batch');
var sourcemaps = require('gulp-sourcemaps');
var prefix = require('gulp-autoprefixer');
var connect = require('gulp-connect');
var browserify = require('gulp-browserify');
var livereload = require('gulp-livereload');
var browsersync = require('browser-sync');
var config = {
port: 1338,
srcDir: './src',
destDir: './public',
content: {
src: '/**/*.html'
},
styles: {
src: '/scss/app.scss',
dest: '/css',
includePaths: [
'node_modules/foundation-sites/scss',
'node_modules/motion-ui/src'
],
prefix: ["last 2 versions", "> 1%", "ie 9"]
},
scripts: {
src: '/js/app.js',
dest: '/js'
},
img: {
src: '/img/**/*',
dest: '/img'
}
};
var srcDir = './src',
destDir = './build';
gulp.task('styles', function() {
return gulp.src(config.srcDir + config.styles.src)
.pipe(sourcemaps.init())
.pipe(sass({
includePaths: config.styles.includePaths,
sourceMap: true,
outFile: config.destDir + config.styles.dest + '/app.css',
outputStyle: 'compressed'
}))
.pipe(prefix(config.styles.prefix))
.pipe(sourcemaps.write())
.on('error', sass.logError)
.pipe(gulp.dest(config.destDir + config.styles.dest))
.pipe(browsersync.reload({ stream: true }));
});
gulp.task('scripts', function() {
gulp.src(config.srcDir + config.scripts.src)
.pipe(browserify({
insertGlobals : true,
debug : !gulp.env.production
}))
.pipe(gulp.dest(config.destDir + config.scripts.dest))
});
gulp.task('include', function() {
gulp.src(config.srcDir + config.content.src)
.pipe(include())
.on('error', console.log)
.pipe(gulp.dest(config.destDir));
return gulp.src(config.srcDir + config.img.src)
.pipe(gulp.dest(config.destDir + config.img.dest));
});
gulp.task('webserver', function() {
connect.server({
root: [config.destDir],
port: config.port
});
});
gulp.task('browsersync', function() {
browsersync({
port: config.port,
proxy: 'localhost:' + config.port
});
});
gulp.task('watch', ['browsersync'], function () {
watch(config.srcDir + '/**/*.*', batch(function (events, done) {
gulp.start('include', done);
gulp.start('styles', done);
gulp.start('scripts', done);
}));
});
gulp.task('default', ['styles', 'scripts', 'include', 'webserver', 'watch']);
Have you run the command 'npm install'?
See below. The problem I'm having with my current code is that Sourcemaps aren't getting injected via Browsersync. Am I missing something here or doing it the wrong way?
For reference:
https://www.browsersync.io/docs/gulp/#gulp-sass-maps
// requirements
var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
var browserSync = require('browser-sync').create();
var prefix = require('gulp-autoprefixer');
var rename = require('gulp-rename');
var sourcemaps = require('gulp-sourcemaps');
var cssclean = require('gulp-clean-css');
// create sass tasks
gulp.task('sass', function() {
return sass('assets/scss/style.scss', {sourcemap: true, style: 'compact'})
.on('error', function (err) {
console.error('Error!', err.message);
})
.pipe(rename({suffix: '.min'}))
.pipe(cssclean())
.pipe(prefix("last 2 versions", "> 1%", "ie 8", "Android 2", "Firefox ESR"))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('assets/styles'))
.pipe(browserSync.stream({match: '**/*.css'}))
});
gulp.task('serve', ['sass'], function() {
browserSync.init({
proxy: "localhost/portfolio2014",
open:false
});
gulp.watch("assets/scss/**/*.scss", ['sass']);
gulp.watch(["assets/styles/*.css", "site/**/*", "content/**/*", "assets/javascript/*.js"]).on('change', browserSync.reload);
});
// default task (just run gulp)
gulp.task('default', ['serve'] );
Do you have to use gulp-ruby-sass? The gulpfile.js below is adding sourcemaps with gulp-sass and updating the browser when saving .scss files with sourcemaps.
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var prefix = require('gulp-autoprefixer');
var rename = require('gulp-rename');
var sourcemaps = require('gulp-sourcemaps');
var cssclean = require('gulp-clean-css');
// create sass tasks
gulp.task('sass', function () {
return gulp.src('assets/scss/test.scss')
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(rename({ suffix: '.min' }))
.pipe(cssclean())
.pipe(prefix("last 2 versions", "> 1%", "ie 8", "Android 2", "Firefox ESR"))
.pipe(sourcemaps.write(''))
.pipe(gulp.dest('assets/styles'))
.pipe(browserSync.stream({ match: '**/*.css' }))
.on('error', function (err) {
console.error('Error!', err.message);
});
});
gulp.task('serve', ['sass'], function () {
browserSync.init({
proxy: "localhost/portfolio2014",
open: false
});
gulp.watch("assets/scss/**/*.scss", ['sass']);
gulp.watch(["assets/styles/*.css", "assets/javascript/*.js"]).on('change', browserSync.reload);
});
// default task (just run gulp)
gulp.task('default', ['serve']);
I have this Gulp task in my 'gulpfile.js' which utilises the gulp-ruby-sass plugin. When I run it, it tasks at least 8 seconds to compile. The equivalent script in Grunt can take less than 1 second so I am confused as to what is causing the lag.
'use strict';
var gulp = require('gulp');
var minifyCSS = require('gulp-minify-css');
// Load plugins
var plugins = require('gulp-load-plugins')();
var path = {
src: function (path) {
return './assets/' + path;
},
dist: function (path) {
return './web/' + path;
},
};
// Styles
gulp.task('styles', function () {
return gulp.src(path.src('styles/**/*.scss'))
.pipe(plugins.rubySass({sourcemap: false, style: 'expanded', quiet: true }))
.pipe(plugins.autoprefixer('last 2 versions', '> 1%', 'ie 8'))
.pipe(gulp.dest(path.src('styles')))
.pipe(minifyCSS())
.pipe(plugins.rename({suffix: '.min'}))
.pipe(gulp.dest(path.dist('styles')))
.pipe(plugins.size());
});
I swapped out gulp-ruby-sass for gulp-sass and I can now compile in under a second. Marvellous!