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.
Related
Gulp-livereload is giving me an error when I save a change to my .scss files. My gulpfile.js has been working fine for years and just started giving me trouble a little while ago. The scss gets compiled to css and livereload tries to reload the page, but I get the following error (photo attached: https://i.stack.imgur.com/o57el.png). When I manually reload the page the error goes away and the style changes are reflected. Also, if I make changes to other files (i.e. HTML or JavaScript) everything works just fine.
It may also be worth mentioning, I am using MAMP to create a local Apache server, so I don't think I can make use of something else like browsersync. Any help would be much appreciated, thank you!
Here is what my gulpfile.js looks like.
'use strict';
var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var sass = require('gulp-sass');
var livereload = require('gulp-livereload');
gulp.task('sass', function () {
return gulp.src('./styles/sass/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass.sync().on('error', sass.logError))
.pipe(sourcemaps.write())
.pipe(gulp.dest('./styles/css'))
.pipe(livereload());
});
gulp.task('html', function() {
return gulp.src('./**/*.html')
.pipe(livereload());
});
gulp.task('js', function() {
return gulp.src('./js/*.js')
.pipe(livereload());
});
gulp.task('watch', function () {
livereload.listen();
gulp.watch('./styles/sass/**/*.scss', gulp.series('sass'));
gulp.watch('./*.html', gulp.series('html'));
gulp.watch('./js/*.js', gulp.series('js'));
});
I have a small problem against I'm fighting since few hours. I'd like to use gulp for watching scss files, convert them to css then reload browser.
It worked until reload browser. So sass is working with gulp but not Browsersync. Here is my gulpfile.js, maybe someone can help ?
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');
gulp.task('sass', function () {
gulp.src('webroot/css/style.scss')
.pipe(sass({includePaths: ['scss']}))
.pipe(gulp.dest('webroot/css'));
});
gulp.task('browser-sync', function() {
browserSync.init(["./**/*.css", "./**/*.php","./**/*.ctp","./**/*.js"], {
server: {
baseDir: "./",
proxy:{target:'cake.dev', ws : true}
},
logLevel: "debug",
});
});
gulp.task('default', ['sass', 'browser-sync'], function () {
gulp.watch("webroot/css/*.scss", ['sass']);
});
Ps : I'm working with CAKEPHP 3.
So you need to tell browserSync to reload at the end of the sass task:
gulp.task('sass', function () {
gulp.src('webroot/css/style.scss')
.pipe(sass({includePaths: ['scss']}))
.pipe(gulp.dest('webroot/css'))
.pipe(browserSync.reload({stream:true});
});
I solved it :
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');
gulp.task('sass', function () {
gulp.src('webroot/css/style.scss')
.pipe(sass({includePaths: ['scss']}).on('error', sass.logError))
.pipe(gulp.dest('webroot/css'));
});
gulp.task('browser-sync', function() {
browserSync.init(["webroot/css/*.css", "webroot/js/*.js"], {
proxy : "http://cake.dev/",
});
});
gulp.task('default', ['sass', 'browser-sync'], function () {
gulp.watch("webroot/css/*.scss", ['sass']);
});
You don't have to use server{//...} in browserSync init because that is to CREATE a server. Instead if you are on wamp you have to use simply proxy... (if you have a virtual host you must modify it and replace "require local" by "require all granted", I THINK...).
And on the "on error" condition is to not stop the program if you make an error writing your scss and saving it.
So you can make mistakes, but you are responsable to learn about it.
Thanks Everyone. Hope this will help somebody else one day.
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 have been playing with gulp and babel for the past few days. I am getting a solid grasp of setting up babel with gulp through tutorials. I've noticed that the newer the tutorial the more changes that develop.
Here is one way I was able to set up es6 to es5 with a transpiler.
var gulp = require('gulp');
var babel = require('gulp-babel');
gulp.task('es6to5', function () {
return gulp.src('js/src/app.js')
.pipe(babel())
.pipe(gulp.dest('dist'));
});
However, I do not want to rerun gulp each time, and I want the dist/ folder to update on each save.
I added browser-sync and delete.
var gulp = require('gulp');
var babel = require('gulp-babel');
var browserSync = require('browser-sync');
var del = require('del');
gulp.task('clean:dist', function() {
return del([
'dist/app.js'
]);
});
gulp.task('es6to5', function () {
return gulp.src('js/src/app.js')
.pipe(babel())
.pipe(gulp.dest('dist'));
});
gulp.task("browserSync", function() {
browserSync({
server: {
baseDir: './dist'
}
});
});
gulp.task("copyIndex", ['clean:dist'], function() {
gulp.src("src/index.html")
.pipe(gulp.dest('./dist'))
.pipe(browserSync.reload({stream: true}));
});
gulp.task('watchFiles', function() {
gulp.watch('src/index.html', ['copyIndex']);
gulp.watch('src/**/*.js', ['babelIt']);
});
gulp.task('default', ['clean:dist', 'es6to5','browserSync','watchFiles']);
I set up a default that will clean out the dist folder then run es6to5. Afterwards I want it to sync and update. I called watchFiles last.
However, I am no longer getting updated js files. The files in the dist folder Are not compiling to es5 and everything is going to a 404.
The task
copyIndex seems to be the problem but I am not sure how to fix it or if it is the only problem. Any direction helps.
You have a typo.
It should be gulp.watch('src/**/*.js', ['es6to5']);, not gulp.watch('src/**/*.js', ['babelIt']);
Anyway i suggest to use gulp-watch instead of the built-in watch function. It has several advantages, mainly it recompile on new file creation.
I'm using Gulp + BrowserSync and I'm trying to reload my development website when changes are made to my HTML files, but I can't seem to get it working.
I'm getting no errors in the command line, my page seems to reload but the changes I've made don't appear in the browser, unless I quit the gulp task and run it again.
This is my current setup:
var gulp = require('gulp');
var browserify = require('browserify');
var swig = require('gulp-swig');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
gulp.task('serve', function () {
browserSync({
server: {
baseDir: './Build'
}
});
});
gulp.task('templates', function() {
return gulp.src('./src/*.html')
.pipe(swig())
.pipe(gulp.dest('./Build'))
.pipe(reload({stream: true}))
});
// Default task
gulp.task('default', ['serve', 'templates', 'sass', 'js'], function() {
gulp.watch('./src/*.html', ['templates']);
gulp.watch(['./src/scss/*.scss', './src/scss/**/*.scss'], ['sass']);
gulp.watch('./src/js/*.js', ['js']);
});
Any help with this is appreciated. Thanks in advance!
The problem in this setup seems to be swig. When you check the files in ./Build, they haven't changed, so the browser is loading the files correctly. But swig does not get the changes. Disabling swig's caching feature should resolve this:
gulp.task('templates', function() {
return gulp.src('./src/*.html')
.pipe(swig({
defaults: { cache: false }
}))
.pipe(gulp.dest('./Build'))
.pipe(reload({stream: true}));
});