When I run gulp, the 'styles' task starts running and sits forever, never finishing and not throwing any error. I have tried to uninstall and reinstall everything I can think of, and nothing seems to make a difference.
This is the function that is not finishing:
gulp.task('styles', function buildStyles() {
return gulp
.src(stylesGulpPaths)
// Copy scss files to build/scss for compass.
.pipe(gulp.dest('build/scss'))
// But only compile main.scss, which imports the rest.
.pipe(filter('**/main.scss'))
.pipe(compass({
css: 'build/css',
http_path: '/',
// image: 'build/images',
require: ['compass/import-once/activate', 'sass-globbing'],
sass: 'build/scss',
}))
.on('error', function (err) { console.error(err.message); })
// 'Concatenate' our one file so we write it to
// build/css/main.css
.pipe(concat('main.css'))
.pipe(gulpif(args.production, minifycss()))
.pipe(gulp.dest('build/css'));
});
var stylesGulpPaths = [
'app/**/*.scss',
'!app/vendor/**/*.scss',
];
Version:
gulp -v => 3.9.1
compass -v => 1.1.0.alpha.3 (Polaris)
node -v => 5.6.0
In my console it gets to the Starting 'styles'... line and just stays there forever.
I am pointing the correct ruby version (2.1.2).
Any thoughts are greatly appreciated.
Fixed it!
There were conflicting compass versions. I just had to uninstall compass, compass-rails, and sass-rails and reinstall compass.
Related
Hi i'm trying to run some gulp task on netlify for building Hugo web.
I wonder how to run serial gulp task on netlify,
by the way this is my gulpfile.js
var gulp = require('gulp');
var removeEmptyLines = require('gulp-remove-empty-lines');
var prettify = require('gulp-html-prettify');
var rm = require( 'gulp-rm' );
var minifyInline = require('gulp-minify-inline');
gulp.task('tojson', function () {
gulp.src('public/**/*.html')
.pipe(removeEmptyLines())
.pipe(gulp.dest('public/./'));
});
gulp.task('htmlClean', function () {
gulp.src('public/**/*.html')
.pipe(removeEmptyLines({
removeComments: true
}))
.pipe(gulp.dest('public/./'));
});
gulp.task('templates', function() {
gulp.src('public/**/*.html')
.pipe(prettify({indent_char: ' ', indent_size: 2}))
.pipe(gulp.dest('public/./'))
});
gulp.task('minify-inline', function() {
gulp.src('public/**/*.html')
.pipe(minifyInline())
.pipe(gulp.dest('public/./'))
});
where should i put the command to run all my gulps task in Netlify?
There are two places to setup your build commands in Netlify.
Admin Option
Put your commands in the online admin under the Settings section of your site and go to Build & Deploy (Deploy settings) and change the Build command:
Netlify Config file (netlify.toml) Option
Edit/add a netlify.toml file to the root of your repository and put your build commands into the context you want to target.
netlify.toml
# global context
[build]
publish = "public"
command = "gulp build"
# build a preview (optional)
[context.deploy-preview]
command = "gulp build-preview"
# build a branch with debug (optional)
[context.branch-deploy]
command = "gulp build-debug"
NOTE:
The commands can be any valid command string. Serializing gulp commands would work fine if you do not want to create a gulp sequence to run them. In example, gulp htmlClean && hugo && gulp tojson would be a valid command.
Commands in the netlify.toml will overwrite the site admin command.
You can string your tasks together like this:
add another plugin with NPM:
https://www.npmjs.com/package/run-sequence
var runSequence = require('run-sequence');
gulp.task('default', function (callback) {
runSequence(['tojson', 'htmlClean', 'templates', 'minify-inline'],
callback
)
})
Then run $ gulp
There's a section on run-sequence on this page that will help:
https://css-tricks.com/gulp-for-beginners/
I have a gulp script, and when I run it from command line, it does not return to shell.
this is a simple gulp command to delete files from dist directory
'use strict';
var del = require('del');
var gulp = require('gulp');
gulp.task('clean', function (cb) {
return del(['dist/**/*'], cb);
});
run command:
gulp clean
[13:39:10] Using gulpfile gulpfile.js
[13:39:10] Starting 'clean'...
[13:39:11] Finished 'clean' after 6.35 ms
npm WARN package.json abc#0.0.0 No description
npm WARN package.json abc#0.0.0 No repository field.
npm WARN package.json abc#0.0.0 No README data
npm WARN package.json karma-coverage#0.2.7 No README data
npm WARN package.json karma-phantomjs-launcher#0.1.4 No README data
it does not return to shell, I have to do CTRL+C to return back to shell.
I am new to gulp, please let me know what I did wrong, thanks.
Try removing the callback argument.
gulp.task('clean', function () {
return del(['dist/**/*']);
});
I want my Gulp build to fail, if there are errors in JSHint.
According to the documentation of gulp-jshint I can use the "fail reporter".
However the following does not work:
gulp.task("lint", function() {
return gulp.src(JS_SOURCES)
.pipe(jshint())
.pipe(jshint.reporter("jshint-stylish"))
.pipe(jshint.reporter("fail"));
});
The task above always returns with exit code 0, even when there are errors in JSHint.
I am using gulp 3.8.10 and gulp-jshint 1.9.0.
There are discussions in the github issues of gulp-jshint here and here ... but according those discussions I gather that above code should work with the latest versions of gulp and gulp-jshint. However it does not ...
Has anybody figured out how to fail the build properly with gulp-jshint?
TLDR;
Until GulpJS comes with a good solution in a stable release, use the workaround as suggested by Bahmutov on GitHub.
He creates a workaround, using his own filter:
var map = require('map-stream');
var exitOnJshintError = map(function (file, cb) {
if (!file.jshint.success) {
console.error('jshint failed');
process.exit(1);
}
});
gulp.task('lint', function() {
gulp.src('example.js')
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish'))
.pipe(exitOnJshintError);
});
Long answer
This question has been posted as an issue on GitHub: How to fail gulp build? #6 . Pay special attention to Bahmutov's comment.
The solution (hack) he proposes is to add his own filter and do a process.exit(1); when there are hinting errors, which looks like this:
var map = require('map-stream');
var exitOnJshintError = map(function (file, cb) {
if (!file.jshint.success) {
console.error('jshint failed');
process.exit(1);
}
});
gulp.task('lint', function() {
gulp.src('example.js')
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish'))
.pipe(exitOnJshintError);
});
This issue links to another issue Plugin doesn't fail build #10.
What they say here basically, is that Gulp should take care of the build failing.
This results in another issue which has been reported on GulpJS: Controlling failing builds #113. Which on his turn has been move to "finish then fail" #20.
The latter one has been fixed and the Gulp JS release can be tracked on: changing this #347.
So, we'll have to wait for it to be released...
In the mean time, we can use the workaround as mentioned at the top of my post in the TLDR;
I've implemented it my gulpfile.js in task scripts-app.
It works for me. I have the same gulp task:
return gulp.src(['./src/**/*.js', './docs_src/**/*.js'])
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish'))
.pipe(jshint.reporter('fail'))
and here's what happens:
$ gulp --version
[11:03:41] CLI version 3.9.0
[11:03:41] Local version 3.9.0
[14559:3392 - 0:2151] 11:03:41 [tony#tony-lin:o +1] ~/work/solo/fsstatic2 (master)
$ cat package.json
{
"name": "fsstatic2",
"version": "0.0.0",
"description": "fsstatic",
"author": "FreedomSponsors",
"devDependencies": {
"gulp": "~3.9.0",
"gulp-concat": "~2.5.2",
"gulp-linker": "~0.1.7",
"gulp-webserver": "~0.9.1",
"yargs": "~3.12.0",
"gulp-sass": "~2.0.1",
"gulp-ng-templates": "0.0.6",
"gulp-ngtemplate": "~0.2.5",
"gulp-htmlmin": "~1.1.3",
"merge-stream": "~0.1.7",
"gulp-copy": "0.0.2",
"gulp-jshint": "~1.11.0",
"jshint-stylish": "~2.0.1"
}
}
[14559:3392 - 0:2152] 11:04:01 [tony#tony-lin:o +1] ~/work/solo/fsstatic2 (master)
$ gulp jshintall
[11:04:11] Using gulpfile ~/work/solo/fsstatic2/gulpfile.js
[11:04:11] Starting 'jshintall'...
/home/tony/work/solo/fsstatic2/src/components/todo_example/todo.js
line 26 col 23 Missing semicolon.
⚠ 1 warning
[11:04:11] 'jshintall' errored after 467 ms
[11:04:11] Error in plugin 'gulp-jshint'
Message:
JSHint failed for: /home/tony/work/solo/fsstatic2/src/components/todo_example/todo.js
[14559:3392 - 0:2153] 11:04:11 [tony#tony-lin:o +1] ~/work/solo/fsstatic2 (master)
$ echo $?
1
»Hello world! How do I use Gulp to start Jekyll in a subfolder?«
My folder structure looks like this:
- foundation
- jekyll
- node_modules
gulpfile.js
To start jekyll with gulp I use this task, which works perfect if the gulpfile.js is in the jekyll-folder.
gulp.task('jekyll', function () {
require('child_process').spawn('jekyll', ['serve','-w'], {stdio: 'inherit'});
});
But how do I start jekyll in the jekyll folder if gulpfile.js is in the root directory?
Passing the cwd option to spawn did the trick :
gulp.task('jekyll', function () {
require('child_process')
.spawn('jekyll', ['serve','-w'], {stdio: 'inherit', cwd: 'jekyll' });
});
And gulp jekyll !
What I do?
Run gulp (SCSS files are being processed, I get a CSS file)
I change any SCSS file again
Expected:
CSS file from 1. is updated with the changes from 2.
What happens?
CSS file from 1. isn't changed
Command line output:
$ gulp
[09:24:28] Using gulpfile c:\Users\User\_dev\github\project\gulpfile.js
[09:24:28] Starting 'sass'...
[09:24:28] Finished 'sass' after 98 ms
[09:24:28] Starting 'default'...
[09:24:28] Finished 'default' after 7.31 μs
[09:24:35] sass-watch saw _base.scss was changed
[09:25:39] sass-watch saw _base.scss was changed
gulpfile.js:
gulp.task('sass', function() {
watch({ glob: 'css/**/*.{scss,sass}', name: 'sass-watch'})
.pipe(plumber())
.pipe(sass())
.pipe(gulp.dest('css'))
});
gulp.task('default', ['sass']);
Notes:
Issue on GitHub (gulp)
Issue on GitHub (gulp-watch)
gulpfile.js on GitHub Gist)
OS: Win7
node: 0.10.29
npm: 1.4.14
The way the source files are piped in is not important. The result stays the same when using gulp.src()
I dont think your sass task is correctly written.
Try something like this:
var gulp = require('gulp');
var sass = require('gulp-sass')
gulp.task('sass', function () {
gulp.src('PATH-TO-SASS-FILES/*.scss')
.pipe(sass())
.pipe(gulp.dest('./css'));
});