BrowserSync in the gulpfile below is not showing the changes made to index.html even after it says 'Reloading Browsers' in command line as well as the 'Connected to BrowserSync' notification in Chrome.
Another odd thing that's occurring is that after the third save of the index.jade file, the rendered website in Chrome completely disappears, nothing in the rendered DOM.
I've followed ShakyShane's recipe on github (with a few tweaks). It worked without the tweaks on another project I started, but I can't see what's wrong here.
My file structure is:
project-folder
/app
/css
/jade
/js
/sass
index.html
gulpfile.js
package.json
Any help would be greatly appreciated.
/***********************************************************************************
1. DEPENDENCIES
/***********************************************************************************/
var gulp = require ('gulp'), // gulp core
plumber = require ('gulp-plumber'), // disable interuption
jade = require ('gulp-jade'), // jade compiler
sass = require ('gulp-sass'), // sass compiler
autoprefixer = require ('gulp-autoprefixer'), // sets missinb browser prefixes
browserSync = require ('browser-sync'), // inject code to all devices
reload = browserSync.reload; // browser sync reload
/*********************************************************************************
2. FILE DESTINATIONS (RELATIVE TO ASSETS FOLDER)
**********************************************************************************/
var target = {
jadeSrc : 'app/jade/**/*.jade', // source of jade files
htmlDest : 'app/', // html file destination
sassSrc : 'app/sass/**/*.sass', // source of sass files
cssDest : 'app/css', // minified css destination
jsDest : 'dist/js' // where to put minified js
};
/**********************************************************************************
3. SASS TASK
***********************************************************************************/
gulp.task ('sass', function (){
gulp.src(target.sassSrc) // get the files
.pipe(plumber()) // make sure gulp keeps runnin on errors
.pipe(sass()) // compile all sass
.pipe(autoprefixer()) // complete css with correct vendor prefixes
.pipe(gulp.dest(target.cssDest)) // file destination
.pipe(reload({stream:true}));
});
/**********************************************************************************
4. JADE TASKS
**********************************************************************************/
gulp.task('jade', function(){
var YOUR_LOCALS = {};
gulp.src(target.jadeSrc)
.pipe(jade({
locals: YOUR_LOCALS,
pretty: true
}))
.pipe(gulp.dest(target.htmlDest))
});
// separate watcher for browser-sync reaction to '.jade' file changes
gulp.task('jade-watch', ['jade'], reload);
/**********************************************************************************
5. BUILD SEQUENCES
**********************************************************************************/
gulp.task('default', ['sass', 'jade'], function(){
browserSync({server: target.htmlDest});
gulp.watch(target.sassSrc, ['sass']);
gulp.watch(target.jadeSrc, ['jade-watch']);
});
Related
Here is global.js:
var accountSid= "MY_ACCOUNT_SID";
var authToken= "MY_AUTH_TOKEN";
var twilioClient= require('twilio')(accountSid, authToken);
twilioClient.messages.list(function(err, data) {
data.messages.forEach(function(message) {
console.log(message.body);
console.log("======");
});
});
When I open a command line, navigate to the directory of global.js, and run gulp, a web page opens. But when I check the console, I see this error:
Uncaught TypeError: self._qs.unescape is not a function --- request.js:393
What must I fix for the function to loop thru messages on my Twilio account and log them?
Here are the contents of gulpfile.js:
/*
gulpfile.js
===========
Rather than manage one giant configuration file responsible
for creating multiple tasks, each task has been broken out into
its own file in gulp/tasks. Any files in that directory get
automatically required below.
To add a new task, simply add a new task file that directory.
gulp/tasks/default.js specifies the default set of tasks to run
when you run `gulp`.
*/
var requireDir = require('require-dir');
// Require all tasks in gulp/tasks, including subfolders
requireDir('./gulp/tasks', { recurse: true });
The ./gulp/tasks directory contains these .js files:
browserify.js
default.js
markup.js
publish.js
watchify.js
browserSync.js
dist.js
minifyCss.js
sass.js
watch.js
build.js
images.js
production.js
uglifyJs.js
Contents of ./gulp/tasks/default.js:
var gulp = require('gulp');
gulp.task('default', ['sass', 'images', 'markup', 'watch']);
After changing my project to be organized into src/ and dist/ folders, my changes aren't being compiled and my browsersync task is no longer reloading the page. If I change the color of a div for instance, the color is not updated even if I stop and restart the gulp task. So my question is, how do I change my gulp tasks to watch for changes in the new file structure I am using, and how do I trigger the reload task once the watch task recognizes a change to a file? I think the reload task works, on a previous working version of this gulpfile gulp.watch was working so it doesn't appear to be a problem with that. I tried changing gulp.watch to browserSync.watch as per this answer but that didn't fix it.
I'm guessing this is a problem with my watch task or the browsersync.init but I'm totally stumped.
To be clear, I am making a static webpage using Jade, Bourbon Neat, SCSS, Gulp, and Browsersync.
Here's a link to the full GitHub repo for this project if that helps!
This is my current file structure:
/
dist/
css/
js/
index.html
node_modules/
src/
jade/
js/
scss/
.gitignore
gulpfile.js
package.json
And this is my gulpfile.js:
// VARIABLES
var gulp = require('gulp');
var jade = require('gulp-jade');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
var cssmin = require('gulp-cssmin');
var neat = require('node-neat').includePaths;
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
// TASKS
// Jade task
gulp.task('jade', function() {
return gulp.src('src/jade/**/*.jade')
.pipe(jade({ pretty: true }))
.pipe(gulp.dest('dist/'))
});
// SCSS task
gulp.task('scss', function() {
return gulp.src('src/scss/**/*.scss')
.pipe(sass({ style: 'compressed',
noCache: true,
includePaths: neat }))
.pipe(autoprefixer())
.pipe(cssmin())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('dist/css'))
});
// JS task
gulp.task('js', function() {
return gulp.src('src/js/**/*.js')
.pipe(uglify())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('dist/js/'))
});
// Watch files for changes
gulp.task('watch', ['browser-sync'], function() {
gulp.watch('dist/**/*.html', reload);
gulp.watch('src/scss/**/*.scss', ['scss', reload]);
gulp.watch('src/**/*.jade', ['jade']);
gulp.watch('src/**/*.js', ['js']);
});
// Start Browsersync server
gulp.task('browser-sync', function() {
browserSync.init(['dist/css/**/*.css', 'dist/js/**/*.js'], {
server: {
baseDir: "dist/"
}
});
});
// Default task
gulp.task('default', ['scss', 'jade', 'js', 'watch', 'browser-sync']);
I have pulled your repo and made some fixes, will push under the "fixes" branch. Few things:
Your index.html was referencing your unminified css, while you only exporting minified.
the watch list needed the subfolders prefxied, so gulp.watch('src/js/**/*.js', ['js']); and not gulp.watch('src/**/*.js', ['js']);
Your browserSync.init was referencing the wrong directories (src and not dist).
What worked for me was to switch gulp.watch to browserSync.watch. BrowserSync's documentation indicates that this feature requires at least version 2.6.0. So you may need to update your version of BrowserSync if you are not using that version.
How can I compile and move sass files from sass/** folder to css/** directory using Gulp?
src('sass/**/*.sass')
dest('css/**/*.css')
PS: every sass file must have it's compiled css-version (without file-concatenation)
PPS: I can't use sass --w sass:css method, because I also have to watch other files (.js, .jade) for changes
In your gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
// styles task : for generating css
gulp.task('styles', function() {
return gulp.src('sass/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('css/'))
});
// watch task : which will watch for changes, and run styles task
gulp.task('watch', function() {
gulp.watch('sass/**/*.scss', ['styles']);
});
Then in the terminal just run the following
gulp watch
Following this tutorial, I've setup a basic gulp config along with a .scss file that I want compiled into .css using gulp-sass. When I run gulp watch from the console, the watch task register fine, but nothing happens when I edit the .scss file, and I can't figure out why.
gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
//style paths
var sassFiles = 'assets/styles/sass/**/*.scss',
cssDest = 'assets/styles/css/';
gulp.task('styles', function(){
gulp.src(sassFiles)
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest(cssDest));
});
gulp.task('watch', function() {
gulp.watch('sassFiles',['styles']);
});
terminal output:
shooshte#M:~/Webpages/CV2$ gulp watch
[20:38:40] Using gulpfile ~/Webpages/CV2/gulpfile.js
[20:38:40] Starting 'watch'...
[20:38:40] Finished 'watch' after 5.37 ms
You were passing 'sassFiles' (as a string) and not the sassFiles variable.
gulp.task('watch', function() {
gulp.watch(sassFiles,['styles']); // Removed '' around sassFiles
});
I also noticed you are passing the sassFiles variable into your styles task. I'm a bit foggy but I don't think this works and further more It may, as suggested, indicate a poor directory structure.
The suggested methods for how to structure a sass project vary, but all share one common factor. They suggest breaking up your sass into partials prefixed with an underscore
/styles
application.scss
_footer.scss
_header.scss
_sidebar.scss
And then importing them all into a single top level scss file. application.scss
#import "footer";
#import "header";
#import "sidebar";
You can then just tell the styles task to compile application.scss and all of the files referenced as imports will get pulled in automatically.
gulp.task('styles', function(){
gulp.src('assets/styles/sass/application.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest(cssDest));
});
Last week I tried writing a gulpfile from scratch for a small javascript project. I chose to use BrowserSync to compile my code and reload the browser (Chrome). It was working well throughout the weekend and I got the done. However, I feel like I opened up the project yesterday and now when I run the 'gulp' command it doesn't connect to the browser, give the "Connected to BrowserSync" message, and provide the autoreload functionality. However in the console, I still get notified that my files are getting updated and compiled.
Does anyone have any idea how this could happen?
Here's the gulpfile I'm using:
var gulp = require('gulp'),
gutil = require('gulp-util'),
browserSync = require('browser-sync'),
reload = browserSync.reload,
jshint = require('gulp-jshint'),
sass = require('gulp-sass');
gulp.task('browser-sync', function() {
var files = [
'app/**/*/.html',
'app/assets/css/**/*.css',
'app/assets/js/**/*.js'
];
browserSync.init(files, {
server: {
baseDir: './app'
}
});
});
// process JS files and reload all browsers when complete.
gulp.task('js', function () {
return gulp.src('app/assets/js/*js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(gulp.dest('app/assets/js'))
.pipe(browserSync.reload({stream:true}));
});
gulp.task('sass', function() {
return gulp.src('app/assets/sass/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('app/assets/css'))
.pipe(reload({stream: true}));
});
// Reload all Browsers
gulp.task('bs-reload', function () {
browserSync.reload();
});
gulp.task('default', ['browser-sync'], function() {
gulp.watch('app/assets/js**/*.js', ['js']);
gulp.watch('app/assets/sass/*.scss', ['sass']);
gulp.watch('app/*html', ['bs-reload']);
});
Thanks for any advice!
It looks like the browsersync 'script' tag is not being injected in the html file you are serving from, re-check your html file , Sometimes i forget the body tag , If there is no body tag the script tag won't be injected.
when you run gulp , and your page loads up check out the source code (view page source) while it's opened up and check the html structure.
You can copy the tag from other project that you have working fine , run it and copy the script tag injected and paste it on your current project page.
the script tag looks like this (might be diffrent depending on BrowserSync version)
<body>
<script id="__bs_script__">
//<![CDATA[document.write("<script async src='/browser-sync/browser-sync-client.js?v=2.18.5'><\/script>".replace("HOST", location.hostname));//]]>
</script>
Notice: In the above <script> tag browser-sync version is 2.18.5 make sure to replace that with your installed version of browser-sync