Recently, there is something going wrong with my project and i don't know where am i wrong? so need a fresh look and a help.
The issue is that when i run gulp my stylus task compiles fine (I see changes in css) but it doesn't reload in chrome automatically. I have chrome extension (livepage) and all nesessary plugins were installed locally with npm.
I tested another one which is most same and that works fine.
here is my gulpfile :
var gulp = require('gulp'),
stylus = require('gulp-stylus'),
jade = require('gulp-jade'),
plumber = require('gulp-plumber'),
watch = require('gulp-watch');
//- JADE
gulp.task('jade', function(){
return gulp.src('app/jade/*.jade')
.pipe(plumber())
.pipe(jade({pretty:true}))
.pipe(gulp.dest('build'))
});
//- CSS
gulp.task('css', function(){
return gulp.src('app/stylus/*.styl')
.pipe(plumber())
.pipe(stylus())
.pipe(gulp.dest('build/css'))
});
//- WATCH
gulp.task('watch', function(){
gulp.watch('app/stylus/*.styl', ['css']);
gulp.watch('app/jade/*.jade', ['jade']);
});
//- DEFAULT
gulp.task('default', ['jade', 'css', 'watch']);
json :
{
"name": "newone",
"version": "1.0.0",
"devDependencies": {
"gulp": "^3.9.0",
"gulp-jade": "^1.1.0",
"gulp-plumber": "^1.0.1",
"gulp-stylus": "^2.0.6",
"gulp-watch": "^4.3.5"
}
}
project tree
newone
| app
| jade
index.jade
| stylus
style.styl
| build
| css
style.css
index.html
so, any advice? thank you...
Just use Browser-Sync for live reloading, it's awesome!
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var stylus = require('gulp-stylus');
// Static Server + watching styl/html files
gulp.task('serve', ['stylus'], function() {
browserSync.init({
server: "./app"
});
gulp.watch("app/stylus/*.styl", ['stylus']);
gulp.watch("app/*.html").on('change', browserSync.reload);
});
// Compile sass into CSS & auto-inject into browsers
gulp.task('stylus', function() {
return gulp.src("app/stylus/*.styl")
.pipe(stylus())
.pipe(gulp.dest("app/css"))
.pipe(browserSync.stream());
});
gulp.task('default', ['serve']);
Good luck!
Related
When I start gulp Google Chrome doesn't open my http://localhost:3000 and doesn't update my css file automaticaly. I have no idea what am I doing wrong.
It's my first time using Gulp, guys. Any idea to fix it? Thanks
var gulp = require('gulp')
var browserSync = require('browser-sync').create()
var sass = require('gulp-sass')
//compile sass
gulp.task('sass', function() {
return gulp.src(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'])
.pipe(sass())
.pipe(gulp.dest("src/css"))
.pipe(browserSync.stream())
})
//move js to src/js
gulp.task('js', function(){
return gulp.src(['node_modules/bootstrap/dist/js/bootstrap.min.js', 'node_modules/jquery/dist/jquery.min.js',
'node_modules/popper.js/dist/umd/popper.min.js'])
.pipe(gulp.dest("src/js"))
.pipe(browserSync.stream())
})
//gulp html and scss
gulp.task('serve', gulp.parallel('sass'), function(){
browserSync.init({
server: "./src"
})
gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'], ['sass'])
gulp.watch("src/*.html").on('change', browserSync.reload)
})
gulp.task('default', gulp.series('js', 'serve'))
Change this line:
gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'], ['sass'])
to
gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'], gulp.series('sass'))
Your version was gulp v3, not gulp v4.
Also I would change
gulp.task('default', gulp.series('js', 'serve'))
to
gulp.task('default', gulp.series('js', 'sass', 'serve'))
so that you can simplify to:
gulp.task('serve', function(){ // removed the parallel part.
The first time you run gulp.default you may need refresh the browser if you have some changes already made to your files. Best to start the default task first and then make changes to your files.
So I want to connect browsersync to a site I don't have any control over. Basically I want it to replace a css file on the live site with a css file on my computer (which gets compiled from a bunch of less files). When that local css file is changed then browsersync should inject the css like it normally would. I'm using browsersync with gulp since I also want to have other tasks run.
The code below will open gulpjs.com and correctly match main.css from gulpjs.com and attempt to serve something in it's place. But all I'm getting is a 404 for the main.min.css. It's looking for it here
http://localhost:3000/css/main.min.css
I zipped up the test project (node modules not included) you can download it here - https://www.dropbox.com/s/5x5l6bbxlwthhoo/browsersyncTest.zip?dl=0
Here's what I have so far...
Project Structure
css/ main.min.css (compiled from app.less)
less/ app.less
gulpfile.js
package.json
package.json
{
"name": "browsersyncTest",
"devDependencies": {
"autoprefixer": "^6.7.0",
"browser-sync": "^2.18.6",
"cssnano": "^3.10.0",
"gulp": "^3.9.1",
"gulp-clean-css": "^2.3.2",
"gulp-less": "^3.3.0",
"gulp-postcss": "^6.3.0",
"gulp-rename": "^1.2.2",
"gulp-uglify": "^2.0.0",
"gulp-watch": "^4.3.11"
}
}
gulpfile.js
var gulp = require('gulp');
var less = require('gulp-less');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');
var cleancss = require('gulp-clean-css');
var rename = require('gulp-rename');
var watch = require('gulp-watch');
var browserSync = require('browser-sync').create();
gulp.task('default', function() {
});
gulp.task('less', function () {
var plugins = [autoprefixer({browsers: ['last 2 versions', 'ie >= 10']})];
return gulp.src('less/app.less')
.pipe(less())
.pipe(rename('main.min.css'))
//.pipe(postcss(plugins))
//.pipe(cleancss())
.pipe(gulp.dest('css'))
.pipe(browserSync.stream());
});
gulp.task('watch', ['less'], function () {
browserSync.init({
proxy: "http://gulpjs.com/",
files: ['css/**'],
serveStatic: ['css'],
rewriteRules: [{
match: new RegExp('css/main.css'),
fn: function() {
return 'css/main.min.css';
}
}]
});
gulp.watch('less/**/*.less', ['less']);
});
Thanks a bunch!
Got it all figured out.
Here's the updated code.
browserSync.init({
proxy: "http://gulpjs.com/",
rewriteRules: [
{
match: new RegExp("css/main.css"),
fn: function() {
return "main.min.css"
}
}
],
files: "css/*.css",
serveStatic: ['./css']
});
I am using browser-sync and sass among other plugins, but for some reason the browser-sync doesn't inject the css, the sass is getting compiled and being watched but that's it.
here is my gulp file:
'use strict';
const gulp = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const pug = require('gulp-pug');
const browserSync = require('browser-sync').create();
const rename = require('gulp-rename');
const reload = browserSync.reload;
// Compile sass files to css
gulp.task('sass', function () {
return gulp.src('./assets/css/*.sass')
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer({
browsers: ['last 15 versions'],
cascade: true
}))
.pipe(gulp.dest('./site/css'))
.pipe(browserSync.stream())
});
// Compile pug files to html
gulp.task('pug', () =>{
return gulp.src('_pugfiles/*.pug')
.pipe(pug())
.pipe(gulp.dest('./_include'))
.pipe(gulp.dest('./site'))
});
gulp.task('js', function () {
gulp.src("./assets/js/function.js")
.pipe(rename("js/function.js"))
.pipe(gulp.dest("./site"));
});
// the working directory
gulp.task('browser-sync', ['sass', 'pug', 'js'] ,function() {
browserSync.init({
server: {
baseDir: "./site"
},
});
});
// Watch files compiling
gulp.task('watch', function () {
gulp.watch('./assets/css/*.sass', ['sass']);
gulp.watch('./_pugfiles/*.pug', ['pug']);
gulp.watch('./site/*.html').on('change', reload);
gulp.watch('./assets/js/*.js', ['js']);
gulp.watch('./site/js/*.js').on('change', reload)
});
gulp.task('default', ['watch', 'browser-sync']);
and this is my folder structure:
app
_include
_pugfiles
_site
_assets
css
img
js
node_modules
site
so here is what i have tried so far, rebuilding it again, removed few watch tasks
also tried .pipe(browsersync.stream({match: '**/*.css'})); and files: ['!**/*.maps.css'] to ignore css map files.
maybe i have tried other things but i can't remember, i spent most of yesterday trying to fix it.
I'm trying to get my Gulp File working.
Currently it isn't detecting any of my html, sass or JS changes. SASS and JS isn't compiling into the assets folder - this was working until I began to use browserSync... I did have it detecting the html changes but now that isn't working either after I tried to make my gulpfile more efficient.
I need some experienced eyes to see what am I doing wrong below...
package.json
{
"devDependencies": {
"gulp": "latest",
"gulp-util": "latest",
"gulp-sass": "latest",
"gulp-uglify": "latest",
"gulp-concat": "latest",
"gulp-connect-php": "latest",
"gulp-rename": "latest",
"browser-sync": "latest"
}
}
gulpfile.js
var gulp = require('gulp'),
gutil = require('gulp-util'),
sass = require('gulp-sass'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
rename = require('gulp-rename'),
connect = require('gulp-connect-php'),
browserSync = require('browser-sync');
// Change these values
var jsSources = ['assets/scripts/*.js'],
sassSources = ['assets/sass/*.scss'],
sassSources = ['**/*.php'],
outputDir = 'assets',
virtualHost = 'annual-review-2016.dev';
// Log Errors
gulp.task('log', function() {
gutil.log('== My Log Task ==')
});
// Manage CSS
gulp.task('sass', function() {
gulp.src('sassSources')
.pipe(sass({style: 'expanded'}))
.pipe(concat('app.css'))
.on('error', gutil.log)
.pipe(gulp.dest('outputDir'))
});
// Manage JS
gulp.task('js', function(){
return gulp.src('jsSources')
.pipe(concat('app.js'))
.pipe(uglify())
.on('error', gutil.log)
.pipe(gulp.dest('outputDir'));
});
// Live Reload in Browser
gulp.task('connect-sync', function() {
connect.server({}, function (){
browserSync({
proxy: 'annual-review-2016.dev'
});
});
});
// Watch the Styles and Scripts on Save
gulp.task('watch', function() {
gulp.watch('sassSources', ['sass']);
gulp.watch('jsSources', ['js']);
gulp.watch('phpSources').on('change', function () {
browserSync.reload();
});
});
gulp.task('default', ['js', 'sass', 'connect-sync', 'watch']);
You have duplicate declaration of sassSources
You need to remove quotation mark in gulp.dest('outputDir'), otherwise gulp will write the output to /outputDir instead of /assets
And for auto-reloading you need to include .pipe(browserSync.reload({stream: true})); at the bottom of your pipe chain (under gulp.dest in 'sass' task for example).
after reading alot and trying to make my own gulpfile.js I figured out how to make it compile my "scss" to a "css", the problem is that my browser-sync doesn't work because I need a proxy (because im using .php not .html), If I write this on CMD: "browser-sync start --proxy localhost:8080/app" I can see my files, but I need it to sync every time I modify something on my "scss". All I need now is to implement the proxy thing on it and reloads everytime I save/modify the ".scss", this is my currently gulpfile.js :
var gulp = require('gulp');
var httpProxy = require('http-proxy');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');
var paths = {
scss: '.sass/*.scss'
};
gulp.task('sass', function () {
gulp.src('scss/style.scss')
.pipe(sass({
includePaths: ['scss']
}))
.pipe(gulp.dest('css'));
});
gulp.task('browser-sync', function() {
browserSync.init(["css/*.css", "js/*.js"], {
server: {
baseDir: "./"
}
});
});
gulp.task('watch', ['sass', 'browser-sync'], function () {
gulp.watch(["scss/*.scss", "scss/base/*.scss", "scss/sections/*.scss", "scss/style/*.scss"], ['sass']);
});
This gulpfile.js is watching my "scss/syle.scss" and updates my "css/style.css" everytime I modify the scss file.
Have you taken a look at the browserSync options? This should give you a pretty good idea on how to set it up. It doesn't seem like you implemented it in the gulpfile you provided.