I'm using gulp-sass and I get the following errors:
ESL#eslmbp /Applications/MAMP/htdocs/craigpomranz[master*]$ gulp sass
[17:54:53] Using gulpfile /Applications/MAMP/htdocs/craigpomranz/gulpfile.js
[17:54:53] Starting 'sass'...
stream.js:94
throw er; // Unhandled stream error in pipe.
^
Error in plugin 'gulp-sass'
/Applications/MAMP/htdocs/craigpomranz/wp-content/themes/craig/scss/partials/base:13: error: error reading values after 'xsmall'
at opts.error (/Applications/MAMP/htdocs/craigpomranz/node_modules/gulp-sass/index.js:67:17)
at onError (/Applications/MAMP/htdocs/craigpomranz/node_modules/gulp-sass/node_modules/node-sass/sass.js:73:16)
Here's my gulpfile.js:
// Include gulp
var gulp = require('gulp');
// Include Our Plugins
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
//var sass = require('gulp-ruby-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var minify = require('gulp-minify-css');
var browserSync = require('browser-sync');
var rename = require('gulp-rename');
var theme_path = 'wp-content/themes/craig/';
// Compile Our Sass
gulp.task('sass', function() {
return gulp.src(theme_path+'scss/main.scss')
.pipe(sass())
// .pipe(minify({keepBreaks:true}))
.pipe(minify())
//.pipe(rename('style.css'))
.pipe(gulp.dest(theme_path));
});
The same scss (files) compile fine with: sass --watch path/to/main.scss --compressed
I tried with another plugin (gulp-ruby-sass) and it threw a different error.
What am I doing wrong?
Update The error message mentions line 13 in _base.scss. Here is the contents of that file:
//Setting breakpoints
$xsmall : 400px;
$small : 768px; //phones
$medium : 1024px; //tablets
$breakpoints: (
'xsmall' :'(max-width: #{$xsmall})', //<--HERE IS LINE 13
'small': '(max-width: #{$small})',
// 'small': '(min-width: #{$xsmall+1}) and (max-width: #{$small})',
'medium': '(min-width: #{$small+1}) and (max-width: #{$medium})',
'large': '(min-width: #{$medium + 1})'
);
gulp-sass doesn't support maps, try using your commented out gulp-ruby-sass.
What will be supported is lists:
$breakpoint-keys: (
'key_a',
'key_b',
'key_c'
);
$breakpoint-values: (
'value_a',
'value_b',
'value_c'
);
But as you'll see, these are one-dimensional. However maps (new in SASS 3.3.0, 7 March 2014) will allow you to use keys which will let you use the syntax you are currently using:
$breakpoints: (
'key_a' : 'value_a',
'key_b' : 'value_b',
'key_c' : 'value_c'
);
For more information about lists and maps, refer to this article: http://viget.com/extend/sass-maps-are-awesome
Related
I want to ask a question about importing js file into another js file and use it in gulp. You can see my gulp.config file and gulpfile. when i try to run gulp task which is vet i am getting error like this ;
[00:06:21] Using gulpfile ~\pluralsight-gulp-master\gulpfile.js
[00:06:21] Starting 'vet'...
[00:06:21] 'vet' errored after 13 ms
[00:06:21] Error: Invalid glob argument: undefined
at Gulp.src (C:\Users\Altan\pluralsight-gulp-master\node_modules\vinyl-fs\li
b\src\index.js:20:11)
gulp.config.js
module.exports = function(){
var config = {
//all js to vet
alljs: [
'./src/**/*.js',
'./*.js'
]
};
return config;
};
gulpfile.js
var gulp = require ('gulp');
var jscs = require ('gulp-jscs');
var jshint = require ('gulp-jshint');
var util = require ('gulp-util');
var gulpprint = require ('gulp-print').default;
var gulpif = require ('gulp-if');
var args = require ('yargs').argv;
var config= require('./gulp.config');
gulp.task('vet',done=>{
gulp
.src(config.alljs)
.pipe(gulpif(args.verbose,gulpprint()))
.pipe(gulpprint())
.pipe(jscs())
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish',{verbose:true}));
done();
});
you are returning a function from gulp.config.js
when you require it, it should be
require('./gulp.config')()
I'm having an issue with sourcemaps in gulp: when I try to implement gulp-sourcemaps directly through a pipe, but also when I try to feed it in via webpack, which if I've understood correctly, has sourcemaps by default, I keep getting the same confusing error:
Error: Cannot find module 'source-map'
I can see the #gulp-sourcemaps folder in my node_modules, which contains within it an identity-map folder containing a bunch more node_modules including the source-map module in question, so I think everything is hooked up as it should be. That being said, I'm new to gulp, so I might be missing something really obvious.
Can anyone offer me some guidance on how to help gulp find the module?
// package vars
const pkg = require("./package.json");
// gulp
const gulp = require("gulp");
const gulpIf = require("gulp-if");
// webpack
const webpack_config = require("./webpack.config");
// load all plugins in "devDependencies" into the variable $
const $ = require("gulp-load-plugins")({
pattern: ["*"],
scope: ["devDependencies"]
});
// ...
gulp.task("sass", function() {
return gulp
.src(pkg.paths.app.scss + "**/*.scss")
.pipe($.sourcemaps.init())
.pipe($.sass())
.pipe($.autoprefixer())
.pipe($.sourcemaps.write("./maps"))
.pipe(gulp.dest(pkg.paths.app.css))
.pipe(
$.browserSync.reload({
stream: true
})
);
});
// ...
gulp.task("webpack", function() {
return gulp
.src(pkg.paths.app.js + "**/*.js")
.pipe($.webpack(webpack_config))
.pipe(gulp.dest(pkg.paths.public.js));
});
// ...
I want to uglify and combine my js files with gulp. Here is my code
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var pump = require('pump');
var gutil = require('gulp-util');
gutil.env.type = 'production';
gulp.task('uglify', function (cb) {
return gulp.src([
'pure/modernizr.js',
'pure/horizon.js'
])
.pipe(gutil.env.type === 'production' ? uglify() : gutil.noop())
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest("ugly"));
});
var sourcemaps = require("gulp-sourcemaps");
var concat = require("gulp-concat-js");
gulp.task("concat", function () {
return gulp.src([
'ugly/modernizr.js',
'ugly/horizon.js'
])
.pipe(sourcemaps.init())
.pipe(concat({
"target": "concatenated.js", // Name to concatenate to
"entry": "./main.js" // Entrypoint for the application, main module
// The `./` part is important! The path is relative to
// whatever gulp decides is the base-path, in this
// example that is `./lib`
}))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest("pure/"));
});
I end up with some code enclosing my js files from obfuscator stating:
//// THIS FILE IS CONCATENATED WITH gulp-obfuscator-js
When I include this in code, it throws require is not defined, I surf around the web and found one similar question. But that answer is also not clear for me. I believe that I miss some small thing here, since I am new to gulp.
The issue here is I have used gulp-concat-js which obfuscate your js. I should have used gulp-concat. May help someone.
I would like to use gulp to run a custom browserify command whenever a js file (function.js) is modified.
The browserify command that I want to run is;
$ browserify function.js --standalone function > bundle.js
I am using this gulpfile.js as sample.
https://github.com/gulpjs/gulp/blob/master/docs/recipes/fast-browserify-builds-with-watchify.md
How do I modify this gulpfile to run the customized browserify command?
'use strict';
var watchify = require('watchify');
var browserify = require('browserify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var gutil = require('gulp-util');
var sourcemaps = require('gulp-sourcemaps');
var assign = require('lodash.assign');
// add custom browserify options here
var customOpts = {
entries: ['./src/index.js'],
debug: true
};
var opts = assign({}, watchify.args, customOpts);
var b = watchify(browserify(opts));
// add transformations here
// i.e. b.transform(coffeeify);
gulp.task('js', bundle); // so you can run `gulp js` to build the file
b.on('update', bundle); // on any dep update, runs the bundler
b.on('log', gutil.log); // output build logs to terminal
function bundle() {
return b.bundle()
// log errors if they happen
.on('error', gutil.log.bind(gutil, 'Browserify Error'))
.pipe(source('bundle.js'))
// optional, remove if you don't need to buffer file contents
.pipe(buffer())
// optional, remove if you dont want sourcemaps
.pipe(sourcemaps.init({loadMaps: true})) // loads map from browserify file
// Add transformation tasks to the pipeline here.
.pipe(sourcemaps.write('./')) // writes .map file
.pipe(gulp.dest('./dist'));
}
I am using node.js v6.9 on webstorm.
The command you want to run is;
$ browserify function.js --standalone function > bundle.js
Based on this, the modified code is;
// add custom browserify options here
var customOpts = {
entries: ['./function.js'],
standalone: 'function',
};
Simply add one more property to customOpts for the --standalone parameter. The rest of the code remains the same.
Anyone know how to have a sound ( like grunt ) when gulp throw a error during compile/watch ?
l need to setup something special for gulp for have this feature ?
UPDATE: It should be noted that gulp-util has been deprecated and should not be used.
There is the ubituious gulp-util plugin. One of the features that it provides is the "gutil.beep();" function.
in your project's root execute:
npm install gulp-util --save-dev
then in your Gulpfile.js:
var gutil = require('gulp-util');
gutil.beep();
You can work with gulp-plumber which is excellent for handling errors in gulp streams. Setup the errorHandler method which will call the beeper() method provided by the NPM library - beeper
var gulp = require('gulp');
var plumber = require('gulp-plumber');
var sass = require('gulp-sass');
var beeper = require('beeper'); //https://www.npmjs.com/package/beeper
gulp.task('compile-sass', function () {
return gulp.src('blob/for/files.scss')
.pipe(plumber(errorHandler))
.pipe(sass())
.pipe(gulp.dest('dest/'));
});
function errorHandler(error) {
// 3 beeps for error
beeper(3); // https://www.npmjs.com/package/beeper
return true;
}
Now, whenever there is an error in compiling sass, you will get 3 beeps to notify you that there was an error.
Good Luck.
npm install -g gulp-crash-sound
Source: https://www.npmjs.com/package/gulp-crash-sound