I am using gulp for the first time I have everything working how I would like it but an stuck on one issue. I have a custom font family in a fonts folder something like "assets/fonts/font-family/...."
The issue I am having is that normally in a static project I would normally just use bourbon's :
#include font-face("source-sans-pro", "/fonts/source-sans-pro/source-sans-pro-regular", $file-formats: eot woff2 woff);
This would then allow me to use the family in a regular font-family declaration easy peasy.
However this does not work in my current gulp project. here is the gulpfile I currently have:
var gulp = require('gulp');
var browserSync = require('browser-sync');
var sass = require('gulp-sass');
var prefix = require('gulp-autoprefixer');
var cp = require('child_process');
var messages = {
jekyllBuild: '<span style="color: grey">Running:</span> $ jekyll build'
};
/**
* Build the Jekyll Site
*/
gulp.task('jekyll-build', function (done) {
browserSync.notify(messages.jekyllBuild);
return cp.spawn('jekyll', ['build'], {stdio: 'inherit'})
.on('close', done);
});
/**
* Rebuild Jekyll & do page reload
*/
gulp.task('jekyll-rebuild', ['jekyll-build'], function () {
browserSync.reload();
});
/**
* Wait for jekyll-build, then launch the Server
*/
gulp.task('browser-sync', ['sass', 'jekyll-build'], function() {
browserSync({
server: {
baseDir: '_site'
},
notify: false
});
});
/**
* Compile files from _scss into both _site/css (for live injecting) and site (for future jekyll builds)
*/
gulp.task('sass', function () {
return gulp.src('assets/css/main.scss')
.pipe(sass({
includePaths: ['css'],
onError: browserSync.notify
}))
.pipe(prefix(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true }))
.pipe(gulp.dest('_site/assets/css'))
.pipe(browserSync.reload({stream:true}))
.pipe(gulp.dest('assets/css'));
});
/**
* Watch scss files for changes & recompile
* Watch html/md files, run jekyll & reload BrowserSync
*/
gulp.task('watch', function () {
gulp.watch('assets/css/**', ['sass']);
gulp.watch(['index.html', '_layouts/*.html', '_includes/*.html'], ['jekyll-rebuild']);
});
/**
* Default task, running just `gulp` will compile the sass,
* compile the jekyll site, launch BrowserSync & watch files.
*/
gulp.task('default', ['browser-sync', 'watch']);
I am severely confused as to what I need to do next to get custom assets working for the bourbon include. Maybe this is because I installed bourbon in a normal fashion and gulp isn't handling bourbon? Any direction or critiques are much appreciated.
What version of gulp-sass are you using?
I had the same error on version 0.7.3, but upgrading to the current (2.0.4) version fixed this problem.
Related
I'm using a build environment with Jekyll + Gulp. So, using the gulpfile.js below, the build process generate first a dist/css folder with the compiled css inside, and then clear the entire dist folder for put the jekyll build result inside. So, i'm not able to compile the scss files inside the dist folder because every time jekyll it completely clear it.
var gulp = require('gulp');
var browserSync = require('browser-sync');
var sass = require('gulp-sass');
var child = require('child_process');
gulp.task('jekyll', function (done) {
return child.spawn('jekyll' , ['build']).on('close', done);
});
gulp.task('jekyll-rebuild', ['jekyll'], function () {
browserSync.reload();
});
gulp.task('browser-sync', ['sass', 'jekyll'], function() {
browserSync({
server: {
baseDir: 'dist'
}
});
});
gulp.task('sass', function () {
return gulp.src('src/_sass/theme.scss')
.pipe(sass({
includePaths: ['scss'],
onError: browserSync.notify
}))
.pipe(browserSync.reload({stream:true}))
.pipe(gulp.dest('dist/css'));
});
gulp.task('watch', function () {
gulp.watch('src/_sass/*.scss', ['sass']);
gulp.watch(['src/*.html', 'src/_layouts/*.html', 'src/_includes/*'], ['jekyll-rebuild']);
});
gulp.task('default', ['browser-sync', 'watch']);
I have to avoid running jekyll task in parallel with styles and scripts so I have used a runSequence.
gulp.task('build', () => {
runSequence('jekyll', ['styles', 'scripts']);
});
gulp.task('default', ['build', 'browser-sync', 'watch']);
In your Jekyll config you need to declare which folders you want to keep:
keep_files: [ css, build ]
When clobbering the site destination, keep the selected files. Useful for files that are not generated by jekyll; e.g. files or assets that are generated by your build tool. The paths are relative to the destination.
https://jekyllrb.com/docs/configuration/
I've been ponding on this for hours now, I'd love a tip to get my setup going.
Whenever I save my .jade files, the browser does not update immediately. Instead, I need to save a second time before updates are reflected in the browser: the webserver refreshes prior to completing the build-jade task. This seems weird, as I do have the 'build-jade' task as a dependency prior to refreshing.
The .html file is updated after the first save, it's just the refresh occuring too early.
Any tips are greatly appreciated.
gulp-file:
/*global require*/
"use strict";
var gulp = require('gulp'),
path = require('path'),
data = require('gulp-data'),
jade = require('gulp-jade'),
prefix = require('gulp-autoprefixer'),
sass = require('gulp-sass'),
browserSync = require('browser-sync');
/*
* Change directories here
*/
var public_dir = "dist/"
var settings = {
sass_files: "applications/**/*.sass",
jade_files: "applications/**/*.jade",
js_files: "applications/**/*.js"
};
/**
* Compile .scss files into public css directory With autoprefixer no
* need for vendor prefixes then live reload the browser.
*/
gulp.task('build-sass', function() {
gulp.src(settings.sass_files)
// gulp.src(settings.sass_files, { base: "./" })
.pipe(sass({
outputStyle: 'compressed',
onError: browserSync.notify
}))
.pipe(prefix(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true }))
.pipe(gulp.dest(public_dir))
// .pipe(gulp.dest("."))
.pipe(browserSync.reload({ stream: true }));
});
/**
* Compile .jade files and pass in data from json file
* matching file name. index.jade - index.jade.json
*/
gulp.task('build-jade', function() {
gulp.src(settings.jade_files)
// gulp.src(settings.jade_files, { base: "./" })
.pipe(jade({ pretty: true })
.pipe(gulp.dest(public_dir));
});
/**
* Recompile .jade files and live reload the browser
*/
gulp.task('jade-rebuild', ['build-jade'], function() {
browserSync.reload();
});
/**
* Wait for jade and sass tasks, then launch the browser-sync Server
*/
gulp.task('browser-sync', ['build-sass', 'build-jade'], function() {
browserSync({
server: {baseDir: public_dir},
notify: true
});
});
/**
* Watch scss files for changes & recompile
* Watch .jade files run jade-rebuild then reload BrowserSync
*/
gulp.task('watch', function() {
// gulp.watch(settings.js_files, ['jade-rebuild']);
gulp.watch(settings.sass_files, ['build-sass']);
gulp.watch(settings.jade_files, ['jade-rebuild']);
});
/**
* Default task, running just `gulp` will compile the sass,
* compile the jekyll site, launch BrowserSync then watch
* files for changes
*/
gulp.task('default', ['browser-sync', 'watch']);
Although you do have the task in the dependancy list, you are not returning the task, so gulp doesn't actually know when it finishes, fortunately this is quite a simple thing to rectify.
I have taken a sample of your code and added return to the gulp.src() function, you need to follow this procedure with all your functions and then it will work.
Hopefully this is clear enough for you to move forward.
/**
* Compile .jade files and pass in data from json file
* matching file name. index.jade - index.jade.json
*/
gulp.task('build-jade', function() {
return gulp.src(settings.jade_files)
// gulp.src(settings.jade_files, { base: "./" })
.pipe(jade({ pretty: true })
.pipe(gulp.dest(public_dir));
});
Let me know if i can be of any additional help.
I have a problem with the linting and live reloading in my gulp file. They take to much time to finish.
Here is my gulp file, what do I do wrong :
'use strict';
console.time("Loading plugins"); //start measuring
var gulp = require('gulp');
var connect = require('gulp-connect');
var open = require('gulp-open');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var concat = require('gulp-concat');
var babelify = require('babelify');
var sass = require('gulp-sass');
var merge = require('merge-stream'); // Merge all styles (css, sass and less) in one big bundle
var lint = require("gulp-eslint");
var config = {
port: 8001,
devBaseUrl: 'http://localhost',
paths: {
html: "./src/*.html",
externals: "./src/assets/externals/*.js",
js: "./src/**/*.js",
images: './src/assets/images/**/*',
fonts: './src/assets/css/fonts/*',
css: [
"./src/assets/css/*",
],
sass: './src/assets/css/*.scss',
dist: "./dist",
mainJS: "./src/main.js"
}
};
gulp.task('connect', ['watch'], function () {
connect.server({
root: ['dist'],
port: config.port,
base: config.devBaseUrl,
livereload: true,
fallback: './dist/index.html'
})
});
gulp.task('open', ['connect'], function () {
gulp.src('dist/index.html')
.pipe(open({uri: config.devBaseUrl + ":" + config.port + "/"}));
});
gulp.task('html', function () {
gulp.src(config.paths.html)
.pipe(gulp.dest(config.paths.dist))
.pipe(connect.reload());
});
gulp.task('externals', function () {
gulp.src(config.paths.externals)
.on('error', console.error.bind(console))
.pipe(concat('external.js'))
.pipe(gulp.dest(config.paths.dist + '/externals'))
.pipe(connect.reload());
});
gulp.task('js', function () {
browserify(config.paths.mainJS)
.transform('babelify', {presets: ['es2015', 'react']})
.bundle()
.on('error', console.error.bind(console))
.pipe(source('bundle.js'))
.pipe(gulp.dest(config.paths.dist + '/scripts'))
.pipe(connect.reload());
});
gulp.task('images', function () {
gulp.src(config.paths.images)
.pipe(gulp.dest(config.paths.dist + '/images'));
});
gulp.task('styles', function () {
gulp.src(config.paths.css)
.pipe(sass())
.pipe(concat('bundle.css'))
.pipe(gulp.dest(config.paths.dist + '/css'))
.pipe(connect.reload());
});
gulp.task('fonts', function () {
gulp.src(config.paths.fonts)
.pipe(gulp.dest(config.paths.dist + '/css/fonts'));
});
gulp.task('lint', function () {
return gulp.src(config.paths.js)
.pipe(lint())
.pipe(lint.format());
});
gulp.task('watch', function () {
gulp.watch(config.paths.js, ['js', 'lint']);
gulp.watch(config.paths.css, ['styles']);
});
console.timeEnd('Loading plugins');
gulp.task('default', ['js', 'styles', 'lint', 'open', 'watch']);
The lint takes almost 20s to finish and liverolading takes 5-6s to refresh the browser after I make some changes.
Any advice?
Gulp ESLint plugin is generally very slow. I compared it to Grunt at some point (a while back) and it was about 5-10 times slower. Don't know why.
Make sure you are running latest version of ESLint and also that you don't have node_modules directory under your src folder. If you do, you can run eslint with --debug flag to make sure that ESLint is not linting files in your node_modules directory. If for some reason it does, add .eslintignore file and specify everything that you don't want to lint there.
In general, if you want instant feedback while coding, I would suggest looking into editor integrations. Pretty much every editor out there has ESLint plugin at this point. They show you errors directly in the window you are writing your code in.
We've recently come across the same issue on my team. The best workaround was to run ESLint only on the modified files, instead of all js files.
We use nodemon to watch for changed files, though gulp-watch has the same idea.
See the change event on gulp-watch.
Then you'd just run a lint function on the changed file.
You may need to resolve the relative file path.
gulp.watch(config.paths.js, ['js'])
.on('change', lintFile);
const lintFile = (file) => {
return gulp.src(file)
.pipe(eslint());
};
Is it necessary to check you code while developing?
We use another approach:
1)Do not check code while developing, because it is long, also it sometimes doesn't allow to create "fast" mock for something while debugging.
2)Check style only before commit. If something is wrong, fix style and check everything works. Also CI system could control your commits.
So, my suggestion is to remove lint from watch task.
I am not sure if the problem is browser-sync but that would be my best bet. My problem is I am using gulp to automate my workflow for the first time. And when I "gulp things" it runs it opens a new webpage with my project like it should, but when I change anything in my SASS file it does not updates it, even if I hit the refresh key, the only way for me to refresh it is to re-gulp everything.
I have all the dependecies updated. I am using Jekyll also. And some other gulp-plugins.
Heres my gulpfile.js:
var gulp = require('gulp'),
browserSync = require('browser-sync'),
sass = require('gulp-sass'),
prefix = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
cp = require('child_process'),
jade = require('gulp-jade'),
bourbon = require('bourbon').includePaths;
var messages = {
jekyllBuild: '<span style="color: grey">Running:</span> $ jekyll build'
};
/**
* Build the Jekyll Site
*/
gulp.task('jekyll-build', function (done) {
browserSync.notify(messages.jekyllBuild);
var pl = process.platform === "win32" ? "jekyll.bat" : "jekyll";
return cp.spawn(pl, ['build'], {stdio: 'inherit'})
.on('close', done);
});
/**
* Rebuild Jekyll & do page reload
*/
gulp.task('jekyll-rebuild', ['jekyll-build'], function () {
browserSync.reload();
});
/**
* Wait for jekyll-build, then launch the Server
*/
gulp.task('browser-sync', ['sass', 'js', 'jekyll-build'], function() {
browserSync({
server: {
baseDir: '_site'
},
notify: false
});
});
/**
* Compile files from _scss into both _site/css (for live injecting) and site (for future jekyll builds)
*/
gulp.task('sass', function () {
return gulp.src('assets/css/main.scss')
.pipe(sass({
includePaths: [bourbon],
onError: browserSync.notify
}).on('error', sass.logError))
.pipe(prefix(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true }))
.pipe(rename({suffix: '.min', prefix : ''}))
.pipe(minifycss())
.pipe(gulp.dest('assets/css'))
.pipe(gulp.dest('_site/css'))
.pipe(browserSync.reload({stream:true}));
});
/**
* Compile Jade
*/
gulp.task('jade', function() {
return gulp.src('_jadefiles/*.jade')
.pipe(jade())
.pipe(gulp.dest('_includes'));
});
/*
** JS Task
*/
gulp.task('js', function() {
return gulp.src('assets/js/common.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(concat('common.js'))
.pipe(gulp.dest('assets/js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('assets/js'))
.pipe(gulp.dest('_site/js'));
});
/**
* Watch scss files for changes & recompile
* Watch html/md files, run jekyll & reload BrowserSync
*/
gulp.task('watch', function () {
gulp.watch('assets/js/**/*.js', ['js']).on("change", browserSync.reload);
gulp.watch('assets/css/**', ['sass']);
gulp.watch(['*.html', '_layouts/*.html', '_posts/*', '_includes/*'], ['jekyll-rebuild']);
gulp.watch('_jadefiles/*.jade', ['jade']);
});
/**
* Default task, running just `gulp` will compile the sass,
* compile the jekyll site, launch BrowserSync & watch files.
*/
gulp.task('default', ['browser-sync', 'watch']);
where are your sass files?
the bit at the bottom - 'watch' is probably where the problem is.
I think you need to add where your sass folder is. Assuming it is _sass then maybe adding it to the 3rd gulp.watch line like this would work.
gulp.watch(['*.html','_sass/*', '_layouts/*.html', '_posts/*', '_includes/*'], ['jekyll-rebuild']);
This code sets up your watches. But only the js changes are set to notify browser sync:
gulp.task('watch', function () {
gulp.watch('assets/js/**/*.js', ['js']).on("change", browserSync.reload);
gulp.watch('assets/css/**', ['sass']);
gulp.watch(['*.html', '_layouts/*.html', '_posts/*', '_includes/*'], ['jekyll-rebuild']);
gulp.watch('_jadefiles/*.jade', ['jade']);
});
Tell gulp watch to notify browser sync on sass change:
gulp.watch('assets/css/**/*.sass', ['sass']).on("change", browserSync.reload);
But really you want to run 'sass' on sass changes, and then notify browserSync on css changes:
gulp.watch('assets/css/**/*.css').on("change", browserSync.reload);
gulp.watch('assets/css/**/*.sass', ['sass'])
I am a new to using Gulp, just trying to learn it...Now the problem i get and want to ask is the way to setup default task with watch and browser sync included
I need to know am i doing something wrong
Can anybody improve my code here, i don't understand the relation of watch and browser sync, which tasks to run before browser-sync and when to watch
Below is my folder structure
var gulp = require('gulp');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var uglify = require('gulp-uglify');
var less = require('gulp-less');
var plumber= require('gulp-plumber');
var cssmin = require('gulp-cssmin');
var rename = require('gulp-rename');
var htmlmin = require('gulp-htmlmin');
var imagemin = require ('gulp-imagemin');
//scripts task
//uglifies
gulp.task('scripts', function(){
gulp.src('js/*.js')
.pipe(plumber())
.pipe(uglify())
.pipe(gulp.dest('build/js'));
});
//compress images
gulp.task('imagemin', function(){
gulp.src('img/**/*.+(png|jpg|gif|svg)')
.pipe(cache(imagemin({
interlaced: true
})))
.pipe(gulp.dest('build/img'));
});
//CSS styles
gulp.task('less', function(){
gulp.src('less/style.less')
.pipe(plumber())
.pipe(less())
.pipe(gulp.dest('build/css'));
});
gulp.task('cssmin', function(){
gulp.src('build/css/style.css')
.pipe(plumber())
.pipe(cssmin())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('build/css'))
.pipe(reload({stream:true})); // inject into browsers
});
gulp.task('htmlmin', function(){
return gulp.src('*.html')
.pipe(htmlmin({removeComments: true}))
.pipe(gulp.dest('build'))
.pipe(reload({stream:true})); // inject into browsers
});
// Browser-sync task, only cares about compiled CSS
gulp.task('browser-sync', function() {
browserSync(['css/*.css', 'js/*.js','less/*.less', 'images/*'],{
server: {
baseDir: "./"
}
});
});
/* Watch scss, js and html files, doing different things with each. */
gulp.task('default', ['browser-sync' , 'scripts', 'less', 'cssmin', 'htmlmin', 'imagemin'], function () {
/* Watch scss, run the sass task on change. */
gulp.watch(['less/**/*.less'], ['less'])
//Watch css min
gulp.watch(['build/css/*.css'], ['cssmin'])
/* Watch app.js file, run the scripts task on change. */
gulp.watch(['js/*.js'], ['scripts'])
/* Watch .html files, run the bs-reload task on change. */
gulp.watch(['*.html'], ['htmlmin']);
// gulp.watch('app/*.html', browser-sync.reload);
// gulp.watch('app/js/**/*.js', browser-sync.reload);
});
Now the process i want is
Compile less to css and then minify it to build folder
List item
Then Minify my HTML code
Then minify and concatenate my js
Compress all the images (Run only when some images changes)
Run the minified HTML with Browser Sync and watch the changes in all my source HTML,Less, images and JS
I would not worry about minification at this point if your goal is to run in development mode, this applies for imagemin (i would do that offline anyways), cssmin, htmlmin, and your js task that runs uglify by default. Ideally you would want to debug in the browser, and having your code minified will not help you much. If you add a dist task to perform the minification step.
I understand that you need Less to CSS for obvious reasons. So you are looking for something like this:
var gulp = require('gulp');
var plumber = require('gulp-plumber');
var browserSync = require('browser-sync').create();
var sass = require('gulp-less');
// Static Server + watching less/html files
gulp.task('serve', ['less'], function() {
browserSync.init({
server: "./"
});
gulp.watch("less/*.less", ['less']);
gulp.watch("*.html").on('change', browserSync.reload);
});
gulp.task('less', function(){
gulp.src('less/style.less')
.pipe(plumber())
.pipe(less())
.pipe(gulp.dest('build/css'))
.pipe(browserSync.stream());
});
gulp.task('default', ['serve']);
This code invokes serve as the main task. Serve task has less as a dependency (which is going to be invoked first). Then, the callback is finally invoked. BrowserSync is initialized and a watch is added for both html files and less files.
Check out this page if you want to learn more about gulp + browsersync integration.