What is wrong with this gulp file? When it opens the browser, it does not show index.html. Instead, it lists the contents of 'dist', the directory containing index.html.
"use strict";
var gulp = require('gulp');
var connect = require('gulp-connect'); // Runs a local dev server
var open = require('gulp-open');
var config = {
port: 9005,
devBaseUrl: 'http://localhost',
paths: {
html: './src/*.html',
dist: './dist'
}
};
//Start a local development server
gulp.task('connect', function() {
connect.server({
root: ['dist'],
port: config.port,
base: config.devBaseUrl,
livereload: true
});
});
gulp.task('open', ['connect'], function () {
gulp.src('dist/index.html')
.pipe(open({
uri: config.devBaseUrl + ':' + config.port + '/',
app: 'chrome' }));
});
gulp.task('html', function() {
gulp.src(config.paths.html)
.pipe(gulp.dest(config.paths.dist))
.pipe(connect.reload());
});
gulp.task('watch', function() {
gulp.watch(config.paths.html, ['html']);
});
gulp.task('default', ['html', 'open', 'watch']);
The solution was to restrict the version of gulp-connect to "gulp-connect": "^2.2.0", The latest version works differently, but I do not know the correct syntax of the latest. When I tried the answer from the other poster, the page was displayed as expected, but the watch features did not work with it.
At the time of this writing, the current version is ^3.0.0.
I am on Windows 7 if that makes a difference.
[Update] As per #SteveDavis, this was fixed in version 3.2.0.
Hello problem is with your open task you basically telling gulp to open dist directory instead of just index.html
To install the correct version of the gulp-connect plugin make sure you type in
npm install --save-dev gulp-connect#2.2.0 I had the same problem and changing back to that version solved it.
Make sure index.html is under src not psadmin project folder, so it can find it there when it executes
gulp.src(config.paths.html)
.pipe(gulp.dest(config.paths.dist)
Related
I serve a site in development via browser-sync and have tried to wire up the sub-directories, so that the browser on files changes reloads. -- However the browser does not reload when I kick of the server with
$ gulp serve
and load the site in a browser and then change index.html. After this the display in the browser does not update by itself.
Do I do something wrong in my gulpfile?:
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var site = "site"
function browser_sync_init() {
browserSync.init({
server: {
baseDir: site,
index: "index.html"
},
port: 8080,
ui: false,
open: false,
});
}
gulp.task('serve', function() {
browser_sync_init();
gulp.watch(site+"/scripts/*.js").on('change', browserSync.reload);
gulp.watch(site+"/*.html").on('change', browserSync.reload);
});
gulp.task('default', gulp.series('serve'));
Thanks for any pointers!
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.
Newbie to using Gulp and Browser-Sync and I seem to be stuck in an infinite loop when using browserSync.reload() with files stored on a network drive.
If I run the following code for files stored on my local machine it works perfectly fine, but if I run the code on files that are on the networked drive, the 'refresh' task keeps getting run over and over again with out me making any changes to files.
var gulp = require('gulp'),
browserSync = require('browser-sync');
gulp.task('browser-sync', function() {
browserSync.init({
open: 'external',
host: 'test.dev',
proxy: 'test.dev',
port: 3000
});
});
gulp.task('refresh', function () {
browserSync.reload();
// console.log('Refresh');
});
gulp.task('watch', function () {
gulp.watch('**/*.{php,inc,info}', { usePolling: true },['refresh']);
});
gulp.task('default', ['browser-sync', 'watch']);
I found a few post that seem to have a similar issue, those were resolved by updating to the latest version of Browser Sync or using { usePolling: true } on the watch task but I have had no such luck.
Any help is appreciated! Thanks!
Hey guys i am new to angularJs so i am learning. i have used xampp before on port 8080 and now when i set up a gulp server it says that it started successfully but nothing appeared on browser. tried to change port but didnt work. what did i do wrong? here is my gulpfile.js
var gulp = require('gulp'),
connect = require('gulp-connect'),
historyApiFallback = require('connect-history-api-fallback');
//Development Web Server
gulp.task('server', function(){
connect.server({
root: './app',
hostname: 'localhost',
port: 2020,
liverload: true,
middleware: function(connect, opt){
return [ historyApiFallback ];
}
});
});
var stylus = require('gulp-stylus'),
nib = require('nib');
//Preprocess Stylus files to CSS and reload changes
gulp.task('css', function(){
gulp.src('./app/stylesheets/main.styl')
.pipe(stylus({use: nib()}))
.pipe(gulp.dest('./app/stylesheets'))
.pipe(connect.reload());
});
//Reload the browser on HTML changes
gulp.task('html', function(){
gulp.src('./app/**/*.html')
.pipe(connect.reload());
});
//watch code changes and to run related tasks
gulp.task('watch' , function(){
gulp.watch(['./app/**/*.html'],['html']);
gulp.watch(['./app/stylesheets/**/*.styl'],['css']);
});
gulp.task('default', ['server', 'watch']);
I want to use a combination of VScode + Gulp + Electron to build an application. A nice feature of the development workflow would be to add an live reload task to my Gulp watch task, to reload the Electron application on every change.
Any Idea how to achieve this?
Your help is highly appreciated.
I was able to achieve this with the gulp-livereload plugin. Here is the code to livereload CSS ONLY. It's the same for everything else though.
var gulp = require ('gulp'),
run = require('gulp-run'),
livereload = require('gulp-livereload'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
rename = require('gulp-rename'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
autoprefixer = require('gulp-autoprefixer'),
rimraf = require('gulp-rimraf');
var cssSources = [
'app/components/css/main.css',
];
gulp.task('css', function(){
gulp.src(cssSources)
.pipe(concat('main.css'))
.pipe(autoprefixer({browsers: ['last 2 versions', 'ie 10']}))
.pipe(gulp.dest('app/public/styles'))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest('app/public/styles'))
.pipe(livereload());
})
gulp.task('watch', function(){
livereload.listen();
gulp.watch(cssSources, ['css'])
})
gulp.task('run', ['build'], function() {
return run('electron .').exec();
});
gulp.task('default', ['watch', 'run']);
Livereload in a desktop application is awesome.
Make sure you add
<script src="http://localhost:35729/livereload.js"></script>
to your index.html
Even though this has already been answered/accepted, worth mentioning I've also managed to get it working with electron-connect
There is also a way to do this using the gulp-webserver (The reason I ran across this post), and does not require the gulp-livereload. Ignore the react-generator which is a separate task that does my react transforms. Needless to say, this task starts the webserver, watches for changes, runs the generator, and then reloads on those changes.
var gulp = require('gulp'),
electron = require('electron-prebuilt'),
webserver = require('gulp-webserver'),
gulp.task(
'run',
['react-generator'], // Secondary task, not needed for live-reloading
function () {
gulp.watch('./app/react/*.jsx', ['react-generator']);
gulp.src('app')
.pipe(webserver({
port: 8123,
fallback: "index.html",
host: "localhost",
livereload: {
enable: true,
filter: function(fileName) {
if (fileName.match(/.map$/)) {
return false;
} else {
return true;
}
}
},
}));
});
As noted in the previous answer, you will need to add the following to your index file, or it will act like it doesn't work for Electron, but does for browsers.
<script src="http://localhost:35729/livereload.js"></script>
Not specifically with Gulp, but there is an easy Electron plugin meant just for that (reloading an application after a change has been made): electron-reload
Just add the package:
$ npm install electron-reload --save-dev
And add the following line to the top of the /main.js file:
require('electron-reload')(__dirname)
The simplest way I've found is using electron-reloader, after installation, just paste the following code at the top of the app entry file (usually named main.js), and you're all set:
const { app } = require('electron')
app.isPackaged || require('electron-reloader')(module)