new to node.js, trying to use gulp. I got this error:
Task 'styles' is not in your gulpfile
I see it is a very common error, what can cause it?
This is my code.
Both auto-prefixer and gulp are in my package.json file
the file name is autoprefixer.js
var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
gulp.task('styles',function(){
return gulp.src('css/style.css')
.pipe(autoprefixer())
.pipe(gulp.dest('build'))
});
what can be the problem?
I found out my problem... the file name was autoprefixer.js and not gulpfile.js as it should be. once I changed the file name everything worked great.
Related
I am new to gulp and want to use it to convert SASS to CSS. I have a src folder which has some scss files deep inside, and I want to mirror it to the public folder but as css files. This it the gulp code
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('styles', function() {
gulp.src('src/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./public/'))
});
//Watch task
gulp.task('default',function() {
gulp.watch('src/**/*.scss',['styles']);
});
but when I run node gulp the program just ends without any error or messages. Shouldn't it stay running to do te file listening (i.e. watch)? Also when I edit a .scss file, it does not create a public folder with the .css file.
Thanks
You need to run gulp no node gulp
You also need to add the styles task in the default one.
gulp.task('watch', function() {
gulp.watch('src/**/*.scss',['styles']);
});
gulp.task('default', ['watch', 'styles'])
I need some help.
I'm looking for a way to generate (or update if the file already exists) a .css file that is a conversion by an .scss file. All of this when compiling.
Explaining this in a better way :
I'm writing some code, everything is ok and I decide to save. Perfect. ctrl+s and the app run perfectly. Nice. Now I've added a style.scss file somewhere (it doesn't really matter the path). How do I "tell" to the compiler that everytime he compile he also has to 'take' this .scss file, convert it in a .css file, and put it in a specific path?
Well, I found a way to do what I needed to do.
I've created my gulpfile.js in this way :
var gulp = require('gulp');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
gulp.task('styles', function () {
gulp.src('src/app/sass/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css/'));
});
gulp.task('watch', function () {
gulp.watch('./sass/**/*.scss', ['styles']);
});
And added this command to package.json :
"try": "gulp watch && ng s"
the problem is that if in the cli I run the command npm run try it will never start my application, because the watch is an endless stream.
How can I have the watch and the app running both at the same time?
*Edit
Found the solution using concurrently
I've installed nodejs and gulp to auto compile the bootstrap less file (v 3.3.5) with gulp-watch-less module.
Everything is working fine expect one thing: I have to stop and start gulp to regenerate bootstrap.css.
For information, Gulp is detecting that a .less file included in bootstrap.less is modified, I have the following message:
[23:14:40] Starting 'default'...
[23:14:42] Finished 'default' after 2.04 s
[23:16:42] LESS saw variable-overrides.less was changed
[23:16:42] LESS saw variable-overrides.less was changed
[23:16:42] LESS saw bootstrap.less was changed:by:import
[23:16:42] LESS saw bootstrap.less was changed:by:import
But when I open the bootstrap.css file i don’t see the changes until I stop and start gulp again.
Here is the content of my gulpfile.js:
var gulp = require('gulp');
var watchLess = require('gulp-watch-less');
var less = require('gulp-less');
gulp.task('default', function () {
return gulp.src('./../../../../drupal8/sandbox/felicity/themes/octogone/less/bootstrap.less')
.pipe(watchLess('./../../../../drupal8/sandbox/felicity/themes/octogone/less/bootstrap.less'))
.pipe(less())
.pipe(gulp.dest('./../../../../drupal8/sandbox/felicity/themes/octogone/css'));
});
This code is from gulp-watch-less page
Can some one explain me why the bootstrap.css is not auto-re-generated?
I've solved the problem by using gulp-watch-less2
Gulp-watch-less wasn't compatible with gulp 3.9
I feel like im missing something stupid here, can someone explain to me why i can't pull in .bowerrc into gulp? The file structure and process should be extremely simple:
global.js
"use strict";
var gulp = require('gulp');
var bowerRC = require('../.bowerrc');
module.exports.getBowerRC = function() {
return console.log(JSON.stringify(bowerRC));
}
.bowerrc
{
"directory": "./resources/bower_components/",
"analytics": false
}
Ok so what i want to do is basically pull in the value of "directory" as a global in gulp. That way gulp can automagically use the value for whatever tasks / plugins and it maintains DRY concepts without breaking the bower shell itself.
The problem is, when i call the function from a task it errors. The strange part is if i switch the variable bowerRC to point at bower.json it works fine for that... thoughts?
For reference im using node v0.12.0 , gulp v3.9.0 , bower v1.4.1
EDIT: running it on windows7 64bit, no choice im afraid
EDIT2: Updated to node 0.12.4, no change i believe it has something to do with how files are required since even if i comment out the function the error persists.
Figured it out, altered code looks like this:
"use strict";
var gulp = require('gulp');
var fs = require('fs');
module.exports.getBowerRC = function ()
{
var bowerRC = JSON.parse(fs.readFileSync('./.bowerrc', 'utf8'));
return console.log(bowerRC);
}
I want Gulp to load and run a task that is in a different folder.
For example:
files tree:
root
lib
task.js
proj
gulpfile.js
task.js:
var gulp = require('gulp');
gulp.task('myTask', function() {
console.log('done!');
});
and gulpfile.js:
var gulp = require('gulp');
gulp.task('default', ['myTask']);
What I've tried so far:
require('../lib/task.js')
require('require-dir')('../lib/')
In both cases I can see task.js is loaded, but I get the following error:
Task 'myTask' is not in your gulpfile
When task.js is in the proj folder or in a sub folder of it - it works fine,
so I think it has something to do about going up to the parent folder through "../" .
Why is this happening and what can be done?
you can use NodeJS's global or module.exports for this purpose.
http://www.hacksparrow.com/global-variables-in-node-js.html