I have a gulpfile with the following build task:
var gulp = require('gulp'),
source = require('vinyl-source-stream'),
buffer = require('vinyl-buffer'),
babelify = require('babelify'),
browserify = require('browserify'),
uglify = require('gulp-uglify'),
sourcemaps = require('gulp-sourcemaps'),
bs = require('browser-sync').create('BrowserSync');
gulp.task('build', function () {
return browserify({entries: './src/app.js', debug: true})
.transform("babelify", { presets: ['es2015','react'] })
.bundle()
.pipe(source('app.js'))
.pipe(buffer())
.pipe(sourcemaps.init())
.pipe(uglify())
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest('./dist/js'))
.pipe(bs.reload({stream: true}));
});
The process builds my files perfectly, however my browser does not load. Why doesn't my browser reload? And how do I achieve the desired behavior? I feel like I am missing something about BrowserSync.
NOTE: I am fairly confident BrowserSync is working properly as I call bs.reload() in another task, and the page reloads perfectly. Happy to paste in more code however if needed.
Here is a snippet from a starter project that I started a while back that does what you are mentioning...
/*...*/
gulp.task('watchify', () => {
let args = merge(watchify.args, { debug: true })
let bundler = watchify(browserify('./src/js/app.js', args)).transform(babelify, { presets: ["es2015", "react"] })
bundle(bundler)
bundler.on('update', () => {
bundle(bundler)
})
})
function bundle(bundler) {
return bundler.bundle()
.on('error', map_error)
.pipe(source('app.js'))
.pipe(buffer())
.pipe(rename('app.min.js'))
.pipe(sourcemaps.init({ loadMaps: true }))
// capture sourcemaps from transforms
.pipe(uglify())
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest('./dist/js'))
.pipe(sync.reload({
stream: true
}))
}
/*...*/
// watching multiple files with a task 'watch'
gulp.task('default', () => {
gulp.watch('src/js/**/*.js', ['watchify']);
});
The gulp task that started browsersync was run by gulp as it was triggered in the default task.
Then I ran gulp build manually from the terminal, and here was the issue. This manual command thus did not have access to the instance of browsersync that was created by the default gulp process.
So having gulp build run automatically with the instantiated version available did the trick.
Related
I am trying building a website with a clone from https://github.com/cssninjaStudio/krypton.
I can run the project locally with yarn run dev command working properly, but when i try to build the app to host in a VPS with yarn build or yarn run prod giving an error
Task never defined: prod
Here is my gulp.js
const del = require('del');
const options = require("./config");
const browserSync = require('browser-sync').create();
const sass = require('gulp-sass');
const bourbon = require('node-bourbon').includePaths;
const postcss = require('gulp-postcss');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const imagemin = require('gulp-imagemin');
const cleanCSS = require('gulp-clean-css');
const purgecss = require('gulp-purgecss');
const sourcemaps = require('gulp-sourcemaps');
const autoprefixer = require('gulp-autoprefixer');
const panini = require('panini');
const browserify = require("browserify");
const babelify = require("babelify");
const source = require("vinyl-source-stream");
const nodepath = 'node_modules/';
sass.compiler = require('sass');
//Note : Webp still not supported in major browsers including forefox
//const webp = require('gulp-webp'); //For converting images to WebP format
//const replace = require('gulp-replace'); //For Replacing img formats to webp in html
const logSymbols = require('log-symbols'); //For Symbolic Console logs :) :P
//Load Previews on Browser on dev
function livePreview(done) {
browserSync.init({
server: {
baseDir: options.paths.dist.base
},
port: options.config.port || 5000
});
done();
}
//Copy latest installed Bulma
function setupBulma() {
console.log("\n\t" + logSymbols.info, "Installing Bulma Files..\n");
return src([nodepath + 'bulma/*.sass', nodepath + 'bulma/**/*.sass'])
.pipe(dest('src/sass/'));
}
//Compile Sass code
function compileSASS() {
console.log("\n\t" + logSymbols.info, "Compiling Bulma Sass..\n");
return src(['src/sass/bulma.sass'])
.pipe(sass({
outputStyle: 'compressed',
sourceComments: 'map',
sourceMap: 'sass',
includePaths: bourbon
}).on('error', sass.logError))
.pipe(autoprefixer('last 2 versions'))
.pipe(dest('dist/assets/css'))
.pipe(browserSync.stream());
}
//Compile Scss code
function compileSCSS() {
console.log("\n\t" + logSymbols.info, "Compiling App SCSS..\n");
return src(['src/scss/main.scss'])
.pipe(sass({
outputStyle: 'compressed',
sourceComments: 'map',
sourceMap: 'scss',
includePaths: bourbon
}).on('error', sass.logError))
.pipe(autoprefixer('last 2 versions'))
.pipe(dest('dist/css'))
.pipe(browserSync.stream());
}
//Compile HTML partials with Panini
function compileHTML() {
console.log("\n\t" + logSymbols.info, "Compiling HTML..\n");
panini.refresh();
return src('src/pages/**/*.html')
.pipe(panini({
root: 'src/pages/',
layouts: 'src/layouts/',
partials: 'src/partials/',
helpers: 'src/helpers/',
data: 'src/data/'
}))
.pipe(dest('dist'))
.pipe(browserSync.stream());
}
//Concat CSS Plugins
function concatCssPlugins() {
console.log("\n\t" + logSymbols.info, "Compiling Plugin styles..\n");
return src([
nodepath + 'simplebar/dist/simplebar.min.css',
nodepath + 'plyr/dist/plyr.css',
nodepath + 'codemirror/lib/codemirror.css',
nodepath + 'codemirror/theme/shadowfox.css',
'src/vendor/css/*',
])
.pipe(sourcemaps.init())
.pipe(concat('app.css'))
.pipe(sourcemaps.write('./'))
.pipe(dest('dist/css'))
.pipe(browserSync.stream());
}
//Reset Panini Cache
function resetPages(done) {
console.log("\n\t" + logSymbols.info, "Clearing Panini Cache..\n");
panini.refresh();
done();
}
//Triggers Browser reload
function previewReload(done) {
console.log("\n\t" + logSymbols.info, "Reloading Browser Preview.\n");
browserSync.reload();
done();
}
//Development Tasks
function devHTML() {
return src(`${options.paths.src.base}/**/*.html`).pipe(dest(options.paths.dist.base));
}
//Optimize images
function devImages() {
return src(`${options.paths.src.img}/**/*`).pipe(dest(options.paths.dist.img));
}
// Let's write our task in a function to keep things clean
function javascriptBuild() {
// Start by calling browserify with our entry pointing to our main javascript file
return (
browserify({
entries: [`${options.paths.src.js}/main.js`],
// Pass babelify as a transform and set its preset to #babel/preset-env
transform: [babelify.configure({ presets: ["#babel/preset-env"] })]
})
// Bundle it all up!
.bundle()
// Source the bundle
.pipe(source("bundle.js"))
// Then write the resulting files to a folder
.pipe(dest(`dist/js`))
);
}
function copyFonts() {
console.log("\n\t" + logSymbols.info, "Copying fonts to dist folder.\n");
return src([
'src/fonts/*',
])
.pipe(dest('dist/fonts'))
.pipe(browserSync.stream());
}
//Copy data files
function copyData() {
console.log("\n\t" + logSymbols.info, "Copying data files..\n");
return src([
'src/data/**/*',
])
.pipe(dest('dist/data'))
.pipe(browserSync.stream());
}
function watchFiles() {
//watch('src/**/*.html', compileHTML);
watch(`${options.paths.src.base}/**/*.html`, series(compileHTML, previewReload));
watch(['src/scss/**/*', 'src/scss/*'], compileSCSS);
watch(`${options.paths.src.js}/**/*.js`, series(javascriptBuild, previewReload));
watch(`${options.paths.src.img}/**/*`, series(devImages, previewReload));
console.log("\n\t" + logSymbols.info, "Watching for Changes..\n");
}
function devClean() {
console.log("\n\t" + logSymbols.info, "Cleaning dist folder for fresh start.\n");
return del([options.paths.dist.base]);
}
exports.setup = series(setupBulma);
exports.default = series(
devClean, // Clean Dist Folder
resetPages,
parallel(copyFonts, concatCssPlugins, compileSCSS, javascriptBuild, devImages, compileHTML),
livePreview, // Live Preview Build
watchFiles // Watch for Live Changes
);
Need some help to build this website and host it in VPS
Many Thanks in Advance
The prod task is not define within the Gulp file. The dev task is, because it is calling the default gulp task (gulp with no arg is calling the default which is found at the end of the gulp file
exports.default = series(
devClean, // Clean Dist Folder
resetPages,
parallel(copyFonts, concatCssPlugins, compileSCSS, javascriptBuild, devImages, compileHTML),
livePreview, // Live Preview Build
watchFiles // Watch for Live Changes
);
Take a look at your package.json file, this is were the script name are define (such as dev and prod.)
"scripts": {
"dev": "gulp",
"build": "gulp prod",
"prod": "gulp prod",
"preinstall": "npx npm-force-resolutions"
},
So you should create a prod method in your gulp.js and should only call usefull method for prod env (remove livePreview and watch, you are most likely only build and deploy.)
I prefer to task definition like this,
gulp.task("prod", function (callback) {
config.runCleanBuilds = true;
return runSequence(
"taskA",
"taskB",
"taskC",
callback);
});
but you could do it the same way they do in their gulp file I guess
exports.prod = series(
devClean, // Clean Dist Folder
resetPages,
parallel(copyFonts, concatCssPlugins, compileSCSS, javascriptBuild, devImages, compileHTML)
);
Gulp should copy all sub-folders and files to the dist. But it copies only half of them, some folders will be ignored even if I change their names etc. (no special characters, same subfolder structure as the once that got copied correctly ...) - nothing worked. I just can't see any pattern in this.
There is no error message while running gulp. Nothing that would help me find the error.
This is my gulpfile.babel.js :
import path from 'path'
const gulp = require('gulp');
const sourcemaps = require('gulp-sourcemaps');
const babel = require('gulp-babel');
const concat = require('gulp-concat');
import del from 'del';
import nodemon from 'gulp-nodemon';
const paths = {
js: ['./**/*.js', '!dist/**', '!node_modules/**', '!coverage/**', '!./*.test.js'],
statics: ['./package.json', './.gitignore', './.env', './templates/**/**/*'],
resources: ['./resources/**/*'],
public: ['./public/**/*'],
templates: ['./templates/**/**/**/*'],
tests: './server/tests/*.js',
}
gulp.task('clean', function (done) {
del.sync(['dist/**', 'dist/.*', 'coverage/**', '!dist', '!coverage'])
done()
});
gulp.task('copy', function (done) {
gulp.src(paths.statics).pipe(gulp.dest('dist'))
gulp.src(paths.resources).pipe(gulp.dest('dist/resources'))
gulp.src(paths.public).pipe(gulp.dest('dist/public'))
gulp.src(paths.templates).pipe(gulp.dest('dist/templates'))
done()
})
gulp.task('build', function (done) {
gulp.src([...paths.js, '!gulpfile.babel.js'], { base: '.' })
.pipe(babel(
{
presets: ['#babel/env']
}
))
.pipe(gulp.dest('dist'))
done()
})
gulp.task('start', function (done) {
nodemon({
script: path.join('dist', 'index.js'),
delay: 1000,
ext: 'js',
tasks: ['clean', 'copy', 'build'],
ignore: ['node_modules/**/*.js', 'dist/**/*.js'],
})
done()
})
gulp.task('serve', gulp.series('copy', 'build', 'start'))
gulp.task('default', gulp.series('serve'))
a lot of folders, for example The folder dashboard in routes, does not copy to the dist file.
This is my structure:
- backend
- > server
- > server > routes
- ...
- > server > routes > dashboard
- > server > routes > dashboard > *.js
- ...
- gulpfile.babel.js
Your copy task is creating multiple streams with multiple calls to gulp.src. The correct way to combine them is to use merge-stream:
const mergeStream = require('merge-stream');
gulp.task('copy', function () {
return mergeStream(
gulp.src(paths.statics).pipe(gulp.dest('dist')),
gulp.src(paths.resources).pipe(gulp.dest('dist/resources')),
gulp.src(paths.public).pipe(gulp.dest('dist/public')),
gulp.src(paths.templates).pipe(gulp.dest('dist/templates'))
);
})
Alternatively, since you're simply copying your folder structure in the dist folder, you could also do this:
gulp.task('copy', function () {
return gulp.src([...paths.statics,
...paths.resources,
...paths.public,
...paths.templates],
{base: '.'})
.pipe(gulp.dest('dist'))
})
I am working on a small project that needs .sass files compiled into .css files. I have used Gulp a while ago and loved it, but my old gulpfile.js does not work anymore, because Gulp has changed since version 4.
I have made a new gulpfile.js:
var gulp = require('gulp'),
sass = require('gulp-sass'),
rename = require('gulp-rename');
var paths = {
styles: {
src: 'src/scss/*.scss',
dest: 'build/css'
}
};
function styles() {
return gulp
.src(paths.styles.src, {
sourcemaps: true
})
.pipe(sass())
.pipe(rename({
basename: 'main',
suffix: '.min'
}))
.pipe(gulp.dest(paths.styles.dest));
}
function watch() {
gulp
.watch(paths.styles.src, styles);
}
var syncConfig = {
server: {
baseDir : './',
index : 'index.html'
},
port : 3000,
open : false
};
// browser-sync
function server() {
init(syncConfig);
}
var build = gulp.parallel(styles, watch, server);
gulp
.task(build);
gulp
.task('default', build);
I have a "Did you forget to signal async completion?" error returned by the console.
Where is my mistake?
There ware two things missing: the browsersync variable browsersync = require('browser-sync').create() and the callback for the server function:
function server(done) {
if (browsersync) browsersync.init(syncConfig);
done();
}
It compiles SASS to CSS, still there is this problem: the page does not reload automatically when changes are made in the main.scss.
Here is the entire code:
var gulp = require('gulp'),
browsersync = require('browser-sync').create(),
sass = require('gulp-sass'),
rename = require('gulp-rename');
var paths = {
styles: {
src: 'src/scss/*.scss',
dest: 'build/css'
}
};
function styles() {
return gulp
.src(paths.styles.src, {
sourcemaps: true
})
.pipe(sass())
.pipe(rename({
basename: 'main',
suffix: '.min'
}))
.pipe(gulp.dest(paths.styles.dest));
}
function watch() {
gulp
.watch(paths.styles.src, styles);
}
var syncConfig = {
server: {
baseDir : './',
index : 'index.html'
},
port : 3000,
open : false
};
// browser-sync
function server(done) {
if (browsersync) browsersync.init(syncConfig);
done();
}
var build = gulp.parallel(styles, watch, server);
gulp
.task(build);
gulp
.task('default', build);
I've added livereload to my Gulp task. Its working except when I edit a CSS file the entire page is refreshed, not just the pages CSS.
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var minifyCss = require('gulp-minify-css');
var sizereport = require('gulp-sizereport');
var watch = require('gulp-watch');
var batch = require('gulp-batch');
var run = require('run-sequence');
gulp.task('watch-theme-css', ['theme-css'], function () {
livereload.listen();
watch(themeFiles.sass, batch(function (events, done) {
gulp.start('theme-css', done);
}))
});
var themeFiles = {
sass: [
'mysite/base/sass/*.s+(a|c)ss',
'mysite/content/sass/*.s+(a|c)ss',
'mysite/custom/sass/*.s+(a|c)ss'
],
out: {
css: 'mysite/build'
}
};
gulp.task('theme-css', function () {
return gulp.src(themeFiles.sass)
.pipe(gulpif(env === 'development', sourcemaps.init()))
.pipe(sass().on('error', sass.logError))
.pipe(minifyCss({
compatibility: 'ie8'
}))
.pipe(gulpif(env === 'dev', sourcemaps.write('.')))
.pipe(gulp.dest(themeFiles.out.css))
.pipe(livereload());
});
Update Ive tried the following code from the link below but it does the same thing. http://www.roelvanlisdonk.nl/?p=4675
gulp.task('watch-theme-css', ['theme-css'], function () {
livereload.listen();
watch(themeFiles.sass, batch(function (events, done) {
gulp.start('theme-css', done);
}), ["reloadCss"]);
});
Same behaviour from this: https://laracasts.com/discuss/channels/tips/proper-way-to-use-livereload-with-laravel-elixir
gulp.task('watch-lr-css', ['theme-css'], function () {
livereload.changed(themeFiles.sass);
});
I tried the following but when I try and turn on the live reload browser plugin it says it cannot find the live reload server.
gulp: how to update the browser without refresh (for css changes only)
gulp.task('watch-theme-css', ['theme-css'], function () {
//livereload.listen();
livereload.changed(themeFiles.sass);
watch(themeFiles.sass, batch(function (events, done) {
gulp.start('theme-css', done);
}));
});
I spent a few hours on this last night and came across this: https://github.com/vohof/gulp-livereload/issues/93.
Looks like it's because of your sourcemaps. gulp-livereload tries to be smart and only reloads the css if there are only css changes. Otherwise it reloads the whole page because it thinks there are more files that changed.
So you just filter your glob down to only css before you call the livereload() function.
So something like this might help:
var filter = require('gulp-filter');
...
gulp.task('theme-css', function () {
return gulp.src(themeFiles.sass)
.pipe(gulpif(env === 'development', sourcemaps.init()))
.pipe(sass().on('error', sass.logError))
.pipe(minifyCss({
compatibility: 'ie8'
}))
.pipe(gulpif(env === 'dev', sourcemaps.write('.')))
.pipe(gulp.dest(themeFiles.out.css))
// Add filter here
.pipe(filter('**/*.css'))
.pipe(livereload());
});
You need to call livereload.changed(files) when change happens. To do that see gulp-watch doc.
watch('**/*.js', function (files) {
livereload.changed(files)
});
I'm working on a project with a few others. While they get Gulp to work, it doesn't seem to work on my computer, even through our code is identical.
When I write the 'gulp' command, I get this:
[10:51:17] Starting 'browserify'...
[10:51:19] Finished 'browserify' after 2.37 s
[10:51:19] Starting 'default'...
[10:51:19] Finished 'default' after 17 μs
But when I save the changes in the files Gulp is suppose to be watching, the 'update' event doesnt seem to be triggered.
Here is the Gulp file
var gulp = require("gulp"),
jest = require("gulp-jest"),
source = require('vinyl-source-stream'),
browserify = require('browserify'),
watchify = require('watchify'),
reactify = require('reactify');
require("harmonize")();
var paths = {
scripts: "src/**/*.js",
tests: "__tests__"
};
gulp.task("jest", function () {
return gulp.src(paths.tests).pipe(jest({
scriptPreprocessor: "preprocessor.js",
unmockedModulePathPatterns: [
"../node_modules/react"
],
testPathIgnorePatterns: [
"node_modules",
"spec/support"
],
moduleFileExtensions: [
"js",
"json",
"react"
]
}));
});
gulp.task('browserify', function() {
var bundler = browserify({
entries: ['./src/js/TopLevel.js'],
transform: [reactify],
debug: true,
cache: {}, packageCache: {}, fullPaths: true
});
var watcher = watchify(bundler);
return watcher
.on('update', function () { // When any files update
var updateStart = Date.now();
console.log('Updating!');
watcher.bundle() // Create new bundle that uses the cache for high performance
.pipe(source('main.js'))
.pipe(gulp.dest('./public/assets/js'));
console.log('Updated!', (Date.now() - updateStart) + 'ms');
})
.bundle() // Create the initial bundle when starting the task
.pipe(source('main.js'))
.pipe(gulp.dest('./public/assets/js'));
});
gulp.task("watch", function() {
gulp.watch("src/**/*.js", ["jest"]);
gulp.watch("__tests__/*.js", ["jest"]);
});
gulp.task("default", ["browserify"]);
However, I don't think there is anything wrong with the code, as it works for my other team members.
Any help and comments are highly appreciated!
Try this:
gulp.task("watch", function() {
gulp.watch("./src/**/*.js", ["jest"]);
gulp.watch("./__tests__/*.js", ["jest"]);
});
If you are only running gulp in the command line the watch task will not trigger since the default task is only running browserify, just change your default task to this.
gulp.task("default", ["browserify", "watch"]);