I am running the following in my gulpfile.js
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var csswring = require('csswring');
var sass = require('gulp-sass');
gulp.task('styles', function() {
var processors = [
csswring
];
return gulp.src('xampp/htdocs/wordpress/wp-content/themes/paws2play/sass/style.scss')
.pipe(sass())
.on('error', sass.logError)
.pipe(postcss(processors))
.pipe(gulp.dest('xampp/htdocs/wordpress/wp-content/themes/paws2play/style.css'));
});
gulp.task('watch:styles', function(){
gulp.watch('**/*.scss', ['styles']);
});
After running gulp styles I get this out put
[19:05:34] Using gulpfile c:\xampp\htdocs\wordpress\wp-content\themes\paws2play\gulpfile.js
[19:05:34] Starting 'styles'...
[19:05:34] Finished 'styles' after 17 ms
When I go and check my style.css file, it is empty. I am not sure what I am doing wrong. I have run sass -trace --watch style.scss:style.css and it worked just fine. I am at a loss for what to do here?
Thank You
I see a little error, but I don't think it's a problem in your case.
First make sure that your path is correct.
Check where is your gulpfile.js located
If it is in xampp/htdocs/wordpress/wp-content, then find PATH in gulpfile.js below and change with ./themes/paws2play
Then change your gulpfile.js with:
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var csswring = require('csswring');
var sass = require('gulp-sass');
gulp.task('styles', function() {
var processors = [
csswring
];
return gulp.src('PATH/sass/style.scss')
.pipe(sass().on('error', sass.logError))
.pipe(postcss(processors))
.pipe(gulp.dest('PATH'));
});
gulp.task('watch:styles', function(){
gulp.watch('PATH/sass/**/*.scss', ['styles']);
});
You can also add gulp-debug to see files that are in your stream.
Related
I have problem. I create my own gulpfile and all works fine but i wanna add a browserify to use modules, but i want to watch this. Can you be so nice and watch at my gulpfile and said if i can add somewhere in serve task to watch also browserify? Or maybe you have better solution for this problem?
var gulp = require('gulp');
var browserSync = require('browser-sync');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
var cleanCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var htmlReplace = require('gulp-html-replace');
var htmlMin = require('gulp-htmlmin');
var config = {
dist:'dist/',
src:'src/',
htmlIn:'src/*.html',
cssIn:'src/css/**/*.css',
jsIn:'src/script/**/*.js',
scssIn:'src/scss/**/*.scss',
cssOut:'dist/css',
jsOut:'dist/script',
scssOut:'src/css',
}
gulp.task('reload',function(){
browserSync.reload();
});
gulp.task('serve', ['sass','scripts'], function(){
browserSync({
server:config.src,
port:5050
});
gulp.watch([config.htmlIn, config.jsIn], ['reload']);
gulp.watch(config.scssIn, ['sass']);
})
gulp.task('sass', function(){
return gulp.src(config.scssIn)
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer({
browsers:['last 3 versions']
}))
.pipe(sourcemaps.write())
.pipe(gulp.dest('src/css'))
.pipe(browserSync.stream());
})
gulp.task('mincss',function(){
return gulp.src(config.cssIn)
.pipe(cleanCSS())
.pipe(gulp.dest(config.cssOut))
})
gulp.task('minjs',function(){
return gulp.src(config.jsIn)
.pipe(uglify())
.pipe(gulp.dest(config.jsOut));
})
gulp.task('default', ['serve']);
Add another gulp watch for your browserify.
gulp.watch(config.jsIn, ['browserify']);
I have a problem because I've created task in gulpfiles.js but when I'm creating my file: .scss and then I write command gulp in bash. I have no errors, but there is no file in css folder. In my bash this code apeearing:
C:\Users\DOM\Desktop\react\my-react-project>gulp
[16:33:25] Using gulpfile ~\Desktop\react\my-react-project\gulpfile.js
[16:33:25] Starting 'watch_scss'...
[16:33:25] Finished 'watch_scss' after 13 ms
[16:33:25] Starting 'default'...
[16:33:25] Finished 'default' after 12 μs
This is my code from gulpfile.js :
'use strict';
//dependencies
var gulp = require('gulp');
var sass = require('gulp-sass');
var minifyCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var changed = require('gulp-change');
/////////////////////////////////
// - SCSS/CSS
////////////////////////////////
var SCSS_SRC = './src/Assets/scss/**/*.scss';
var SCSS_DEST = './src/Assets/css';
//Compile SCSS
gulp.task('compile_scss',function () {
gulp.src(SCSS_SRC)
.pipe(sass().on('error', sass.logError))
.pipe(minifyCSS())
.pipe(rename({suffix:'.min'}))
.pipe(changed(SCSS_DEST))
.pipe(gulp.dest(SCSS_DEST));
});
//Detect changes in SCSS
gulp.task('watch_scss', function(){
gulp.watch(SCSS_SRC, ['compile_scss']);
});
//Run tasks
gulp.task('default', ['watch_scss']);
I can't find where is my mistake.
In this line
var changed = require('**gulp-change**');
you should require gulp-changed,so this should work fine.
var changed = require('**gulp-changed**');
If you find this answer helpful please give thumbs up :)
gulp.watch would run your task 'compile_scss' only when you change file in dir defined in SCSS_SRC. Until gulp does not see any modifications in files there - gulp.watch would do nothing. Try gulp.task('default', ['compile_scss', 'watch_scss']);. And I recommend you to use gulp-syncplugin to make tasks 'compile_scss', 'watch_scss' run one after another, because if you modify your default task as I've recommended - these 2 tasks would run in parallel
I've changed previous code to this code:
var gulp = require('gulp');
//var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var minifyCSS = require('gulp-clean-css');
var SRC = './src/Assets/scss/**/*.scss';
var DEST = './src/Assets/css/';
gulp.task('styles', function() {
gulp.src(SRC)
.pipe(sass().on('error', sass.logError))
.pipe(minifyCSS())
.pipe(rename({suffix:'.min'}))
.pipe(gulp.dest(DEST));
});
//Watch task
gulp.task('default',function() {
gulp.watch(SRC,['styles']);
});
and everything works but I have no idea why.
Hi guys am trying to use font-awesome in my postcss layout but it seems not to work. So i tried installing sass with posts to see if it will work but i do not know how to go about it.
I already installed npm gulp for sass
This is my gulp file configuration
var gulp = require('gulp'),
gutil = require('gulp-util'),
webserver = require('gulp-webserver'),
postcss = require('gulp-postcss'),
autoprefixer = require('autoprefixer'),
precss = require('precss'),
cssnano = require('cssnano'),
animation = require('postcss-animation'),
sass = require('gulp-sass'),
source = 'process/css/',
dest = 'builds/postcss/';
gulp.task('html', function() {
gulp.src(dest + '*.html');
});
gulp.task('css', function() {
gulp.src(source + 'style.css')
.pipe(postcss([
precss(),
animation(),
autoprefixer(),
cssnano()
]))
.on('error', gutil.log)
.pipe(gulp.dest(dest + 'css'));
});
gulp.task('watch', function() {
gulp.watch(source + '**/*.css', ['css']);
gulp.watch(dest + '**/*.html', ['html']);
});
gulp.task('webserver', function() {
gulp.src(dest)
.pipe(webserver({
livereload: true,
open: true
}));
});
gulp.task('default', ['html', 'css', 'webserver','watch']);
And am trying to add this sass configuration
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var sass = require('gulp-sass');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');
gulp.task('css', function () {
var processors = [
autoprefixer,
cssnano
];
return gulp.src('./src/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(postcss(processors))
.pipe(gulp.dest('./dest'));
});
Use this https://github.com/jonathantneal/precss or https://github.com/postcss/postcss-scss
example
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var processors = [
require('postcss-font-awesome')
require('precss')
];
gulp.task('css', function () {
gulp.src(['css/style.pcss'])
.pipe(postcss(processors))
.pipe(gulp.dest('css'));
});
I'm setup as outlined below. The good news: styles are being compiled, the bad news: gulp doesn't seem to watch the scss files for a change and compile automatically?
// Include gulp
var gulp = require('gulp');
// Plugins
var concat = require('gulp-concat');
var stripDebug = require('gulp-strip-debug');
var uglify = require('gulp-uglify');
var include = require('gulp-include');
var sass = require('gulp-sass');
var minifycss = require('gulp-minify-css');
// Styles
gulp.task('styles', function() {
gulp.src('./_themes/blanktheme/ui/scss/styles.scss')
.pipe(include())
.pipe(sass({
errLogToConsole: true
}))
.pipe(minifycss())
.pipe(gulp.dest('./_themes/blanktheme/ui/css/'))
});
// Watch
gulp.task('default', ['watch'], function() {
gulp.watch('./_themes/blanktheme/ui/scss/*.scss', ['styles']);
});
gulp.task('default', ['styles', 'watch']);
I think this come from the fact you have two tasks default. I guess gulp ignore the first one (with gulp.watch) to only trigger the second one. Then you have dependencies with watch but seems like watch does not exist ?
You can install gulp-watch locally, and include it in your file. Give a look at gulp-watch documentation it might help.
Try this :D
var watch = require('gulp-watch');
// Styles
gulp.task('styles', function() {
gulp.src('./_themes/blanktheme/ui/scss/styles.scss')
.pipe(include())
.pipe(sass({
errLogToConsole: true
}))
.pipe(minifycss())
.pipe(gulp.dest('./_themes/blanktheme/ui/css/'))
});
// Watch
gulp.task('watch', function() {
watch('./_themes/blanktheme/ui/scss/*.scss', function () {
gulp.start('styles');
});
});
gulp.task('default', ['styles', 'watch']);
I'm having a strange problem with Gulp. Here is my Gulp file:
var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
var notify = require('gulp-notify');
var sass = require('gulp-ruby-sass');
gulp.task('default', function() {
gulp.run('main');
gulp.watch('sass/*.scss', function() {
gulp.run('main');
})
});
gulp.task('main', function() {
return gulp.src('sass/**/*.scss')
.pipe(sass())
.on('error', notify.onError(function(error) { return 'Error: ' + error.message; }))
// .pipe(autoprefixer('last 10 version'))
.pipe(gulp.dest('./css'))
.pipe(notify({ message: 'Your SASS has been auto-prefixed and minified.'}))
;
});
The script runs correctly the first time. But on second and subsequent runs of the same script (without Gulp having stopped running), it puts it in the SASS directory as a subitem of the .SCSS file. Any idea why this is happening. I'm not sure how to even debug.
Try the following code.
It uses the correct syntax for gulp, replacing gulp.run() with the supported function arguments.
var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
var notify = require('gulp-notify');
var sass = require('gulp-ruby-sass');
gulp.task('main', function() {
return gulp.src('./sass/**/*.scss')
.pipe(sass())
.on('error', notify.onError(function(error) { return 'Error: ' + error.message; }))
.pipe(gulp.dest('./css'))
.pipe(notify({ message: 'Your SASS has been auto-prefixed and minified.'}));
});
gulp.watch('sass/*.scss', ['main']);
gulp.task('default', ['main']);
Found the answer, the gulp.dest keeps the folder structure of gulp.src, to override you can set the base property of the src, this will exclude whatever folder the base is set to
example gulp.src('./sass/' + '**/*.scss', {base: 'sass'}) this now excludes sass from the destination, no longer appending sass to your gulp.dest
See and this look at gulp.src