Gulp Version 3.9.1
Gulp Ruby SASS Version 2.1.0
Function:
gulp.task('sass', function() {
sass('C:/xampp/htdocs/bptc/vendor/bower_components/font-awesome/scss/font-awesome.scss',
{ trace: true,
verbose: true
})
.on('error', sass.logError)
.pipe(gulp.dest('public/css/vendor'))
});
Output:
C:\xampp\htdocs\bptc>gulp sass
[12:00:40] Using gulpfile C:\xampp\htdocs\bptc\gulpfile.js
[12:00:40] Starting 'sass'...
[12:00:40] Running command sass --sourcemap=none --trace --update C:/xampp/htdocs/bptc/vendor/bower_components/font-awesome/scss/font-awesome.scss:C:\Users\agf365.BH\AppData\Local\Temp\gulp-ruby-sass\84a250b0f5e0b41f769aa0a7c55878cc\font-awesome.css
[12:00:40] Finished 'sass' after 41 ms
No error messages is appearing yet there are no output files.
Related
I'm trying to set up es6 transpilation from gulp.
I'm setting up a completely minimal test just to get babel working with gulp.
I installed the modules like this:
npm install --save-dev gulp gulp-cli gulp-babel#next #babel/core #babel/preset-env
I have this gulpfile:
var gulp = require('gulp');
var babel = require('gulp-babel');
gulp.task("default", function () {
return gulp.src("src/app.js")
.pipe(babel())
.pipe(gulp.dest("dist"));
});
This setup is slightly adapted from the babel documentation:
https://babeljs.io/setup#installation
When I run 'gulp', I get this output:
[20:16:25] Using gulpfile ~/play/react/babeltest/gulpfile.js
[20:16:25] Starting 'default'...
[20:16:25] 'default' errored after 23 ms
[20:16:25] Error in plugin "gulp-babel"
Message:
Cannot find module 'babel-preset-env' from '/home/bobdobbs/play/babeltest'
How do I get this working?
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.
I am trying to use gulp-sass to compile my scss files, but for some reason it is failing but not displaying an error message.
This is the command output for gulp styles:
[20:40:04] Requiring external module babel-core/register
[20:40:05] Using gulpfile ~\Documents\Development\Web Applications\webux\webux2\gulpfile.babel.js
[20:40:05] Starting 'styles'...
Here is my gulp task:
gulp.task('styles', () => {
return gulp.src('app/styles/*.scss')
.pipe($.sass.sync({
outputStyle: 'expanded',
precision: 10,
includePaths: ['.']
}).on('error', err => {
$.util.log(err);
}))
.pipe(gulp.dest('./tmp/styles'));
});
I get the same output when using $.sass.logError as the error callback.
I'm trying to get browser-sync to inject styles using gulp. I've pretty much copied and pasted from the tutorial, but nothing happens. The sass gets compiled correctly, but the injection doesn't happen. Any ideas what I've done wrong, or how to debug this?
I'm also using MAMP if it makes any difference at all.
My Gulp file:
var gulp = require('gulp'),
sass = require('gulp-sass'),
browserSync = require('browser-sync').create();
// Proxy Server
gulp.task('serve', ['sass'], function() {
browserSync.init({
proxy: "local.website.com"
});
gulp.watch('../css/source/*.scss', ['sass']);
});
// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
return gulp.src('../css/source/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('../css/build'))
.pipe(browserSync.stream());
});
gulp.task('default', ['serve']);
The response in my console:
[gulp] Starting 'default'...
[gulp] Finished 'default' after 4.61 μs
[BS] Proxying: http://local.website.com
[BS] Access URLs:
-------------------------------------
Local: http://localhost:3000
External: http://192.168.8.12:3000
-------------------------------------
UI: http://localhost:3001
UI External: http://192.168.8.12:3001
-------------------------------------
[gulp] Starting 'sass'...
[BS] 1 file changed (main.css)
[gulp] Finished 'sass' after 114 ms
[gulp] Starting 'sass'...
[BS] 1 file changed (main.css)
[gulp] Finished 'sass' after 115 ms
If it matters, here is my package.json:
{
"devDependencies": {
"browser-sync": "^2.9.11",
"gulp": "^3.9.0",
"gulp-sass": "^2.0.4"
}
}
The problem in my case was Drupal - it uses #import instead of link to add CSS files. This module solves it! https://www.drupal.org/project/link_css
You say you've copy pasted from the tutorial, but you didn't copy this part that actually notifies browserSync of changes:
gulp.watch('../css/source/*.scss').on('change', browserSync.reload);
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'));
});