I have this simple gulp task to process .scss files:
var gulp = require('gulp'),
compass = require('gulp-compass'),
autoprefixer = require('gulp-autoprefixer'),
plumber = require('gulp-plumber'),
browserSync = require('browser-sync'),
reload = browserSync.reload;
gulp.task('css', function() {
gulp.src('app/scss/style.scss')
.pipe(plumber())
.pipe(compass({
config_file: './config.rb',
css: 'app/css',
sass: 'app/scss',
require: ['susy', 'breakpoint']
}))
.pipe(autoprefixer('last 2 versions'))
.pipe(gulp.dest('app/css'))
.pipe(reload({
stream: true
}));
});
My problem is that when there is already an app/css/style.css, it won't be overridden by running task gulp css.
As per https://github.com/wearefractal/vinyl-fs#destfolder-opt, gulp.dest should by default override the files in the destination folder. And I have another gulp task for uglify js, the overriding in which works well.
Could someone give me some hint on why this is happening?
Related
In my gulpfile.js I have this:
// Sass configuration
var gulp = require('gulp'),
sass = require('gulp-sass'),
cleanCSS = require('gulp-clean-css'),
sourcemaps = require('gulp-sourcemaps'),
concat = require('gulp-concat'),
plumber = require('gulp-plumber');
autoprefixer = require('autoprefixer');
postcss = require('gulp-postcss');
function handleError(err) {
console.log(err.toString());
this.emit('end');
}
gulp.task('sass', function() {
gulp.src([
'kraater-web/src/app/css/admin/vars.scss',
'kraater-web/src/app/css/admin/*.scss'])
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(concat('admin.scss'))
.pipe(gulp.dest('kraater-web/src/app/css/'))
.pipe(sass())
.pipe(postcss([ autoprefixer() ]))
.pipe(cleanCSS())
.pipe(concat('admin.css'))
.pipe(sourcemaps.write(''))
.pipe(gulp.dest('kraater-web/src/app/css/'))
});
gulp.task('default', ['sass'], function() {
gulp.watch('kraater-web/src/app/css/admin/*.scss', ['sass']).on('error', handleError);
})
I compile all my .scss files into one big admin.css (it isn't even that big though) with mapping, but at one point, when I enter extra parameters to scss the gulp file fails and gives me this error:
C:\wamp\www\site17\node_modules\source-map\lib\source-map-generator.js:289
throw new Error('Invalid mapping: ' + JSON.stringify({
^
Error: Invalid mapping: {"generated":{"line":186,"column":9},"source":"admin.scss","original":{"line":381,"column":-6},"name":null}
at SourceMapGenerator_validateMapping [as _validateMapping] (C:\wamp\www\site17\node_modules\source-map\lib\source-map-generator.js:289:13)
at SourceMapGenerator_addMapping [as addMapping] (C:\wamp\www\site17\node_modules\source-map\lib\source-map-generator.js:101:12)
at C:\wamp\www\site17\node_modules\source-map\lib\source-map-generator.js:72:17
at Array.forEach (native)
at SourceMapConsumer_eachMapping [as eachMapping] (C:\wamp\www\site17\node_modules\source-map\lib\source-map-consumer.js:155:14)
at Function.SourceMapGenerator_fromSourceMap [as fromSourceMap] (C:\wamp\www\site17\node_modules\source-map\lib\source-map-generator.js:48:24)
at applySourceMap (C:\wamp\www\site17\node_modules\vinyl-sourcemaps-apply\index.js:26:40)
at filePush (C:\wamp\www\site17\node_modules\gulp-sass\index.js:105:9)
at Object.callback (C:\wamp\www\site17\node_modules\gulp-sass\index.js:147:9)
at options.success (C:\wamp\www\site17\node_modules\node-sass\lib\index.js:308:32)
Watching build tasks has finished.
The new parameters I enter into scss are valid, because if I delete some lines before it, then gulp compiles nicely again. It's as if scss maps memory gets full or something and fails to compile.
Anybody seen something like this before?
Handling large files: pass the option largeFile: true to sourcemaps.init().
Check out on NPM.
// Sass configuration
var gulp = require('gulp'),
sass = require('gulp-sass'),
cleanCSS = require('gulp-clean-css'),
sourcemaps = require('gulp-sourcemaps'),
concat = require('gulp-concat'),
plumber = require('gulp-plumber');
autoprefixer = require('autoprefixer');
postcss = require('gulp-postcss');
function handleError(err) {
console.log(err.toString());
this.emit('end');
}
gulp.task('sass', function() {
gulp.src([
'kraater-web/src/app/css/admin/vars.scss',
'kraater-web/src/app/css/admin/*.scss'])
.pipe(plumber())
.pipe(sourcemaps.init({largeFile: true}))
.pipe(concat('admin.scss'))
.pipe(gulp.dest('kraater-web/src/app/css/'))
.pipe(sass())
.pipe(postcss([ autoprefixer() ]))
.pipe(cleanCSS())
.pipe(concat('admin.css'))
.pipe(sourcemaps.write(''))
.pipe(gulp.dest('kraater-web/src/app/css/'))
});
gulp.task('default', ['sass'], function() {
gulp.watch('kraater-web/src/app/css/admin/*.scss', ['sass']).on('error', handleError);
Got it fixed by rolling back the gulp-sass to older version. I simply ran.
npm install gulp-sass#2.3.2
In cmd and it started to compile again.
Original poster of this fix was user araphiel, from in this thread:
https://github.com/nodejs/help/issues/429
Have been unable to get Browsersync working in Gulp.
I have installed the standard JointsWP build (this is a wordpress/foundation mash up), but the following gulpfile doesn't kick off browsersync at all.
I am using MAMP and the site works fine.
Tried a few things but limited gulpfile knowledge.
thanks in advance.
// Grab our gulp packages
var gulp = require('gulp'),
gutil = require('gulp-util'),
sass = require('gulp-sass'),
cssnano = require('gulp-cssnano'),
autoprefixer = require('gulp-autoprefixer'),
sourcemaps = require('gulp-sourcemaps'),
jshint = require('gulp-jshint'),
stylish = require('jshint-stylish'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
rename = require('gulp-rename'),
plumber = require('gulp-plumber'),
bower = require('gulp-bower'),
babel = require('gulp-babel'),
browserSync = require('browser-sync').create();
// Compile Sass, Autoprefix and minify
gulp.task('styles', function() {
return gulp.src('./assets/scss/**/*.scss')
.pipe(plumber(function(error) {
gutil.log(gutil.colors.red(error.message));
this.emit('end');
}))
.pipe(sourcemaps.init()) // Start Sourcemaps
.pipe(sass())
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest('./assets/css/'))
.pipe(rename({suffix: '.min'}))
.pipe(cssnano())
.pipe(sourcemaps.write('.')) // Creates sourcemaps for minified
styles
.pipe(gulp.dest('./assets/css/'))
});
// JSHint, concat, and minify JavaScript
gulp.task('site-js', function() {
return gulp.src([
// Grab your custom scripts
'./assets/js/scripts/*.js'
])
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish'))
.pipe(concat('scripts.js'))
.pipe(gulp.dest('./assets/js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(sourcemaps.write('.')) // Creates sourcemap for minified JS
.pipe(gulp.dest('./assets/js'))
});
// JSHint, concat, and minify Foundation JavaScript
gulp.task('foundation-js', function() {
return gulp.src([
// Foundation core - needed if you want to use any of the
components below
'./vendor/foundation-sites/js/foundation.core.js',
'./vendor/foundation-sites/js/foundation.util.*.js',
// Pick the components you need in your project
'./vendor/foundation-sites/js/foundation.abide.js',
'./vendor/foundation-sites/js/foundation.accordion.js',
'./vendor/foundation-sites/js/foundation.accordionMenu.js',
'./vendor/foundation-sites/js/foundation.drilldown.js',
'./vendor/foundation-sites/js/foundation.dropdown.js',
'./vendor/foundation-sites/js/foundation.dropdownMenu.js',
'./vendor/foundation-sites/js/foundation.equalizer.js',
'./vendor/foundation-sites/js/foundation.interchange.js',
'./vendor/foundation-sites/js/foundation.magellan.js',
'./vendor/foundation-sites/js/foundation.offcanvas.js',
'./vendor/foundation-sites/js/foundation.orbit.js',
'./vendor/foundation-sites/js/foundation.responsiveMenu.js',
'./vendor/foundation-sites/js/foundation.responsiveToggle.js',
'./vendor/foundation-sites/js/foundation.reveal.js',
'./vendor/foundation-sites/js/foundation.slider.js',
'./vendor/foundation-sites/js/foundation.sticky.js',
'./vendor/foundation-sites/js/foundation.tabs.js',
'./vendor/foundation-sites/js/foundation.toggler.js',
'./vendor/foundation-sites/js/foundation.tooltip.js',
])
.pipe(babel({
presets: ['es2015'],
compact: true
}))
.pipe(sourcemaps.init())
.pipe(concat('foundation.js'))
.pipe(gulp.dest('./assets/js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(sourcemaps.write('.')) // Creates sourcemap for minified
Foundation JS
.pipe(gulp.dest('./assets/js'))
});
// Update Foundation with Bower and save to /vendor
gulp.task('bower', function() {
return bower({ cmd: 'update'})
.pipe(gulp.dest('vendor/'))
});
// Browser-Sync watch files and inject changes
gulp.task('browsersync', function() {
// Watch files
var files = [
'./assets/css/*.css',
'./assets/js/*.js',
'**/*.php',
'assets/images/**/*.{png,jpg,gif,svg,webp}',
];
browserSync.init(files, {
// Replace with URL of your local site
proxy: "s18.dev",
});
gulp.watch('./assets/scss/**/*.scss', ['styles']);
gulp.watch('./assets/js/scripts/*.js', ['site-js']).on('change',
browserSync.reload);
});
// Watch files for changes (without Browser-Sync)
gulp.task('watch', function() {
// Watch .scss files
gulp.watch('./assets/scss/**/*.scss', ['styles']);
// Watch site-js files
gulp.watch('./assets/js/scripts/*.js', ['site-js']);
// Watch foundation-js files
gulp.watch('./vendor/foundation-sites/js/*.js', ['foundation-js']);
});
// Run styles, site-js and foundation-js
gulp.task('default', function() {
gulp.start('styles', 'site-js', 'foundation-js');
});
It was in fact my lack of gulp knowledge....
On closer inspection of the gulpfile, there were 2 functions - one with BS and one without...
I was running 'gulp watch' with no joy, whereas simply running 'gulp browsersync' did the trick.
bonza.
I am trying to streamline my workflow and include templating. I installed Nunjucks and tried to set it up so whenever I save a change to a template file gulp watch will fire the nunjucks function and refresh my browser.(firefoxdeveloperedition)
It works at first, but then my browser stops reloading the changes. Every time I save the browser will refresh but the changes do not appear. Here is my gulpfile(i removed the other tasks from this but keep the requirements in so you can see the modules i have installed)
/* Module Requirements */
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var useref = require('gulp-useref');
var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');
var imagemin = require('gulp-imagemin');
var nunjucksRender = require('gulp-nunjucks-render');
/* //Module Requirements */
//Compile sass into css
gulp.task('sass', function(){
return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scss in app/scss and children dirs
.pipe(sass()) // Converts Sass to CSS with gulp-sass
.pipe(gulp.dest('app/css'))
.pipe(browserSync.reload({
stream: true
}))
});
gulp.task('nunjucks', function() {
// Gets .html and .nunjucks files in pages
return gulp.src('app/pages/**/*.+(html|nunjucks)')
// Renders template with nunjucks
.pipe(nunjucksRender({
path: ['app/templates']
}))
// output files in app folder
.pipe(gulp.dest('app'))
});
//Watch for changes in sass and html and update browser.
gulp.task('watch', ['browserSync', 'sass', 'nunjucks'], function (){
gulp.watch('app/scss/**/*.scss', ['sass']);
gulp.watch('app/templates/**/*.+(html|nunjucks)', ['nunjucks']);
gulp.watch('app/*.html', browserSync.reload);
gulp.watch('app/js/**/*.js', browserSync.reload);
// Other watchers
});
gulp.task('browserSync', function() {
browserSync.init({
server: {
baseDir: 'app'
},
browser: ['firefoxdeveloperedition']
})
})
Is my code wrong?
EDIT: After some more testing it actually seems to be tied to Firefox Developer Edition...
I am trying to move all the font-awesome fonts from the bower_components folder to my build directory, but the task isn't copying any files.
gulpfile.js
var gulp = require('gulp'),
sass = require('gulp-sass'),
cssnano = require('gulp-cssnano'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify');
var config = {
bowerDir: 'bower_components'
}
gulp.task('fa', function() {
return
gulp.src(config.bowerDir + '/font-awesome/fonts/**.*')
.pipe(gulp.dest('assets/fonts/font-awesome/'));
});
When I run gulp fa it runs fine, but no files appear in my assets/fonts/font-awesome directory.
I know the .pipe(gulp.dest()) function works because I have a scripts function like so:
gulp.task('scripts', function(){
return gulp.src([
'bower_components/jquery/dist/jquery.min.js',
'bower_components/jquery-validation/dist/jquery.validate.js',
'bower_components/foundation/js/foundation.min.js',
'assets/js/custom/app.js',
])
.pipe(concat('app.js'))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(gulp.dest('assets/js/'))
.pipe(notify({
message: 'Scripts minified'
}));
});
Any ideas?
EDIT
My folder structure is like this:
assets/
--fonts/
----font-awesome/
gulpfile.js
bower_components/
--font-awesome/
----fonts/
------fontawesome-webfont.eot
------fontawesome-webfont.svg
------fontawesome-webfont.ttf
------fontawesome-webfont.woff
------fontawesome-webfont.woff2
I want to suggest to use gulp-copy
var copy = require('gulp-copy');
gulp.task('copy', function() {
gulp.src(['bower_components/font-awesome/fonts/*.*'])
.pipe(copy('assets/fonts/font-awesome/', { prefix: 3}));
});
I cant create output.css file in root directory via gulp .. I want output compressed one file with stylesheet, but the gulp doesnt work them.
I have this structure
- bower_components
- bootstrap
- sass
- custom.scss
- output.css
my gulp file:
var gulp = require('gulp'),
sass = require('gulp-sass'),
watch = require('gulp-watch');
var concat = require('gulp-concat');
gulp.task('scss', function () {
return gulp.src('bower_components/bootstrap/scss/_custom.scss')
.pipe(sass({outputStyle: 'compressed'}))
.pipe(concat('output.css'))
.pipe(gulp.dest('./'));
});
gulp.task('watch', function () {
gulp.watch('bower_components/bootstrap/scss/_custom.scss', ['scss']);
});
gulp.task('default', ['watch']);
You forgot to include the 'scss' task in your default task.
gulp.task('default', ['scss', 'watch']);