A similar question has been asked a few times, but none of the answers are working for me. I'm trying to set up BrowserSync with a proxy of localhost:8888 for. My gulpfile is from the Foundation Framework ZURB template.
gulpfile.babel.js
import gulp from 'gulp';
import browser from 'browser-sync';
// Other Gulp functions
function server(done) {
browser.init({
proxy: 'localhost:8888'
}, done);
}
function reload(done) {
browser.reload();
done();
}
function watch() {
gulp.watch(PATHS.assets, copy);
gulp.watch('templates/**/*.html').on('all', gulp.series(browser.reload));
// Other gulp tasks
}
Running Gulp shows that BrowserSync is proxying:
[Browsersync] Proxying: http://localhost:8888
[Browsersync] Access URLs:
-----------------------------------
Local: http://localhost:3000
External: http://10.0.0.113:3000
-----------------------------------
UI: http://localhost:3001
UI External: http://localhost:3001
I've tried http://localhost:8888 and 127.0.0.1:8888, doesn't help. My file structure:
gulpfile.babel.js
/src (asset source)
/web (dist location)
/templates (Craft CMS templates, all .html files)
Everything else in Gulp is running smoothly, I just can't get the proxy to reload or inject styles.
Now working with this update to the server function:
function server(done) {
browser.init({
port: '8890',
proxy: 'localhost:8888',
reloadOnRestart: true
}, done);
}
Go to localhost:8890 and viola!
Related
I have not much experience with gulp and wonder what to do when deploying? How do I exclude certain tasks (like my 'sass' task for example) when deploying or how does gulp work for production - what would I do? I'm not sure if I use the wrong words or just don't understand it, but I couldn't find much online so far.
My gulp file:
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var cleanCSS = require('gulp-clean-css');
var rename = require("gulp-rename");
var uglify = require('gulp-uglify');
// Compiles SCSS files from /scss into /css
gulp.task('sass', function() {
return gulp.src('scss/main.scss')
.pipe(sass())
.pipe(gulp.dest('css'))
.pipe(browserSync.reload({
stream: true
}))
});
// Minify compiled CSS
gulp.task('minify-css', ['sass'], function() {
return gulp.src('css/main.css')
.pipe(cleanCSS({
compatibility: 'ie8'
}))
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('css'))
.pipe(browserSync.reload({
stream: true
}))
});
// Minify custom JS
gulp.task('minify-js', function() {
return gulp.src('js/scripts.js')
.pipe(uglify())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('js'))
.pipe(browserSync.reload({
stream: true
}))
});
// Copy vendor files from /node_modules into /vendor
// NOTE: requires `npm install` before running!
gulp.task('copy', function() {
gulp.src([
'node_modules/bootstrap/dist/**/*',
'!**/npm.js',
'!**/bootstrap-theme.*',
'!**/*.map'
])
.pipe(gulp.dest('vendor/bootstrap'))
gulp.src(['node_modules/jquery/dist/jquery.js',
'node_modules/jquery/dist/jquery.min.js'])
.pipe(gulp.dest('vendor/jquery'))
gulp.src(['node_modules/jquery-easing/*.js'])
.pipe(gulp.dest('vendor/jquery-easing'))
})
// Default task
gulp.task('default', ['sass', 'minify-css', 'minify-js', 'copy']);
// Configure the browserSync task
gulp.task('browserSync', function() {
browserSync.init({
server: {
baseDir: ''
},
})
})
// Dev task with browserSync
gulp.task('dev', ['browserSync', 'sass', 'minify-css', 'minify-js'], function() {
gulp.watch('scss/*.scss', ['sass']);
gulp.watch('css/*.css', ['minify-css']);
gulp.watch('js/*.js', ['minify-js']);
// Reloads the browser whenever HTML or JS files change
gulp.watch('*.html', browserSync.reload);
gulp.watch('js/**/*.js', browserSync.reload);
});
It depends entirely on your hosting solution and what deployment process you prefer to use. Some of your former questions have the Heroku tag so I assume you use Heroku. If not you can use the second strategy.
One method of using Gulp with Heroku is to automatically run Gulp when you push to the Heroku branch. This is done by having a postinstall script in package.json. Like so:
"scripts": {
..
"postinstall": "gulp"
}
When you push to the remote branch, Heroku will run the build process as normal. After the build process is done it will run the postinstall script. That will run the default task in the gulpfile. This will, of course, run on your Heroku dyno, not on localhost.
If you want to change the different sub tasks that are run during postinstall you can make a new task like this:
gulp.task('deployment', ['minify-css', 'minify-js', 'copy']);
and change the postinstall script to this:
"postinstall": "gulp deployment"
The deployment task will now run instead of the default task.
For this to work you need all the gulp packages in dependencies rather than devDependencies. devDependencies are, after all, not installed on Heroku.
The files that Gulp builds should be added to the .gitignore file. The files that Gulp outputs are often sent to a folder called dist which is kept out of the repository completely. You don't need to have them in the repository as they are being built on Heroku instead.
Another method is to build the files manually yourself before deployment. That means you don't have gulp in the postinstall script (or don't have the postinstall script at all) and keep the gulp packages in devDependencies. The files that are being built should also not be in .gitignore.
Before you deploy you build the files with gulp deployment and then commit them. When you push to Heroku the files will be uploaded like normal, instead of being built there.
This strategy is usually used when you have an ordinary web hosting service.
how to serve my assets (img, stuff) and my bower_components folder with gulp?
i have:
src/
assets/
vendor (bower_co..)/
gulp connect task
gulp.task('connect', function() {
connect.server({
root: ['src'],
livereload: true
});
});
gulp-connect readme says:
root: ['app', 'tmp'],
but when i pass multiple args they dont get served.
so what am i missing?..
I am trying to run karma test via a gulp task. I use https://github.com/karma-runner/gulp-karma and for some reason gulp cannot locate my karma.conf.js. That file is located in the same folder as the gulpfile. The root of the project. No matter what path I put, I get the same error File ./karma.conf.js does not exist. I cannot figure out how to path it correctly. Here is the code for the gulp task.
gulp.task('tdd', function (done) {
new Server({
configFile: 'karma.conf.js'
}, done).start();
});
This is how I spool up karma using Gulp ( and both files are in the same root ).
var karma = require('karma');
gulp.task('karma', function (done) {
karma.server.start({
configFile: __dirname + '/karma.conf.js'
}, done);
});
UPDATE
If you are running NODE.js then
NODE Explnation for __dirname link
"The name of the directory that the currently executing script resides in."
If you are not running NODE.js, then perhaps all you needed was
configFile: '/karma.conf.js'
But if you are running NODE then use the first example.
If another destination directory is assigned to __dirname, then it doesn't work.
Try this:
var Server = require('karma').Server
gulp.task('test', function (done) {
new Server({
configFile: require('path').resolve('karma.conf.js'),
singleRun: true
}, done).start();
});
I'm using gulp-durandal to build our durandal app. It fails on our first module which has a depeendecy to knockout through:
define(['knockout',....
[09:35:27] Durandal Error: ENOENT, no such file or directory 'C:\xxxxx\app\knockout.js'
In module tree:
company/viewmodels/edit
at Object.fs.openSync (fs.js:438:18)
I have knockout defined as a patch in config.js (standard requirejs way) but it seems gulp-durandal does not resolve paths from config.js ?
'knockout': '../Scripts/lib/knockout/knockout-2.3.0',
How do you get gulp-durandal to use our config paths instead of trying to resolve the modules directly under the app folder ? I tried using options.extraModules but that only allows you to add paths to modules, not symbolic names for the module so that doesn't seem to be the correct way.
The basic structure of my durandaljs app follows the standard guidelines I believe, I have a config.js and main.js under the App folder.
My config.js:
define([], function() {
return {
paths: {
'text': '../Scripts/lib/require/text',
'durandal': '../Scripts/durandal',
'plugins': '../Scripts/durandal/plugins',
My main.js
require(['config'], function(config) {
require.config(config);
require(['durandal/system', 'durandal/app', 'durandal/viewLocator', 'plugins/widget', 'custombindings'],
function(system, app, viewLocator, widget) {
..... app code here.....
}
gulpfile.js:
var gulp = require('gulp');
var durandal = require('gulp-durandal');
require(['App/config'], function(config){
console.log('loaded config');
});
gulp.task('durandal', function(){
durandal({
baseDir: 'app', //same as default, so not really required.
main: 'main.js', //same as default, so not really required.
output: 'main.js', //same as default, so not really required.
almond: true,
minify: true,
require:true
})
.pipe(gulp.dest('dir/to/save/the/output'));
});
I guess the question is how do I load my config.js paths into gulp so the paths are resolved correctly ? I tried:
var gulp = require('gulp');
var durandal = require('gulp-durandal');
require(['App/config'], function(config){
console.log('loaded config');
});
But it seems require only wants a string as input (I guess require function in gulp != require from require.js)
I believe the issue is that your gulp-durandal task needs configuration to mimic the config.js file. If you need further assistance please provide more code from your gulp-durandal task.
How can I temporarily disable browsersync, so that it doesn't inject/modify HTML pages? (For testing and debugging.)
There doesn't seem to be a configuration option to do just this, but one hacky workaround is to use snippetOptions to specify a string that will will never be found in the HTML:
snippetOptions: {
rule: {
match: /qqqqqqqqq/
}
}
If this string cannot be found in the HTML, the snippet will never be injected, and browsersync will be inert.
You can use Yargs to send parameters and enable or disable 'watch' task.
Remember this command line to install required components:
npm i --save gulp browser-sync yargs runSequence
On gulpfile.js file:
browserSync.init({
port: 80,
notify: false,
cors: true,
browser: 'chrome',
open: 'local'
});
gulp.task('watch', ['browserSync'], function (){
gulp.watch('dev/*.html', browserSync.reload);
gulp.watch('dev/**/*.js', browserSync.reload);
gulp.watch('dev/**/*.css', browserSync.reload);
});
gulp.task('default', function(callback) {
var sequence = ['browserSync'];
if (args.sync){
sequence.push('watch')
}
runSequence(sequence,callback);
});
This if (args.sync) lines use truthy/falsy searching for sync values and enable/disable 'watch' task.
BrowserSync with watch:
gulp --sync true
BrowserSync without watch:
gulp or gulp --sync false