I got an weird issue. BroswerSync works fine when i am on online(connected by wimax) but not working or launching browser when I on offline. Few days back, same issue happened with livereload. What might be the problem?
Here is simple code on gulpfile.js
var gulp = require('gulp');
var browserSync = require('browser-sync');
gulp.task('browser-sync', function () {
browserSync.init({
server: {
baseDir: './'
}
})
});
when i run gulp command showing-
$ gulp browser-sync
[23:25:12] Using gulpfile e:\myapps\gulp-browsersync\gulpfile.js
[23:25:12] Starting 'browser-sync'...
[23:25:13] Finished 'browser-sync' after 119 ms
and stopped..
In my Case I just change
proxy: 'localhost:80'
to
proxy: '127.0.0.98:80'
and its start working..
I might be missing something here, but have you tried setting browserSync options to offline : true ?
If not, this may very well be the problem.
Link : http://www.browsersync.io/docs/options/#option-online
Related
I try without success to apply a prerendering (or a SSG) to my Vue3 application to make it more SEO friendly.
I found the vue-cli-plugin-prerender-spa, and when I try it with the command line: vue add prerender-spa I have the error:
ERROR TypeError: Cannot read properties of undefined (reading 'endsWith')
After that I tried prerender-spa-plugin but I have an error when I make a npm run build:
[prerender-spa-plugin] Unable to prerender all routes!
ERROR Error: Build failed with errors.
Error: Build failed with errors.
at /Users/myusername/Workspace/myproject/node_modules/#vue/cli-service/lib/commands/build/index.js:207:23
at /Users/myusername/Workspace/myproject/node_modules/webpack/lib/webpack.js:148:8
at /Users/myusername/Workspace/myproject/node_modules/webpack/lib/HookWebpackError.js:68:3
What do you think about this? Do you have any idea?
Nuxt3 is a really powerful meta-framework with a lot of features and huge ecosystem. Meanwhile, it's in RC2 right now so not 100% stable (may still work perfectly fine).
If your project is aiming for something simpler, I'd recommend using Vitesse. It may be a bit more stable and it's probably powerful enough (check what's coming with it to help you decide).
Some solutions like Prerender also exist but it's paid and not as good as some real SSG (/SSR). Also, it's more of a freemium.
I struggled with the same error output until I found the prerender-spa-plugin-next. Then I notice the latest version of prerender-spa-plugin was published 4 years ago and prerender-spa-plugin-next is continually updating. It seems like that prerender-spa-plugin-next is a new version of prerender-spa-plugin with the same functions. So I use prerender-spa-plugin-next instead of prerender-spa-plugin then everything works fine!
Here is my step:
install the package
npm i -D prerender-spa-plugin-next
modify vue.config.js like
const plugins = [];
if (process.env.NODE_ENV === 'production') {
const { join } = require('path');
const PrerenderPlugin = require('prerender-spa-plugin-next');
plugins.unshift(
new PrerenderPlugin({
staticDir: join(__dirname, 'dist'),
routes: ['/'], //the page route you want to prerender
})
);
}
module.exports = {
transpileDependencies: true,
configureWebpack(config) {
config.plugins = [...config.plugins, ...plugins];
},
};
build
npm run build
Then check the index.html under the dist folder you can see the page is prerendered.
Further usage refers to the homepage of prerender-spa-plugin-next
Found and fix about the scss files to import.
In nuxt.config.ts use :
vite: {
css: {
preprocessorOptions: {
scss: {
additionalData: `
#import "#/assets/scss/_variables.scss";
#import "#/assets/scss/my-style.scss";
`
}
},
},
}
Now my 2 mains issue are : how to install vuetify properly, currently syles and components seems working but the JS not, for example, accordions don't expands on click.
And second topic is to have a i18n module, it seems that vue-i18N no longer works.
Thanks.
I'm working on a legacy site that has some pre-set-up Gulp commands.
I want to compile some .less files into .css. The existing script is as such:
gulp.task('less', function(){
return gulp.src('./src/css/less/app.less')
.pipe(less({
paths: [ path.join(__dirname, 'less', 'includes') ]
}))
.pipe(gulp.dest('./src/css/'))
});
However, when I run this I get an error:
Error: File not found with singular glob: /src/css/less/app.less (if this was purposeful, use `allowEmpty` option)
I've checked all paths, all #import and directories and they're all ok.
I am using Gulp Local: 4.0.0, CLI: 2.3.0.
Would anyone know could be causing this?
Maybe later, but Gulp 4 has a new syntax for writing tasks.
Also, you have to fix the wrong path to the source file:
// gulpfile.js
const SRC = 'src';
const DIST = 'src';
function lessTask(cb) {
return src(SRC + '/less/app.less')
.pipe(less())
.pipe(dest(DIST + '/style.css'));
}
exports.default = series(lessTask);
# On terminal:
gulp
When I run 'gulp watch' in my terminal, I get this response:
[13:59:40] Using gulpfile ~/path/to/gulpfile.js
[13:59:40] Starting 'watch'...
[13:59:40] Finished 'watch' after 45 ms
Here is the relevant code from my gulpfile.js:
gulp.task('sass', function () {
return gulp.src([baseDir + '/sass/style.scss',baseDir + '/sass/events/events.scss'])
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer({
browsers: ['last 10 versions'],
cascade: false
}))
.pipe(sourcemaps.write())
.pipe(gulp.dest(baseDir + '/css'))
.pipe(livereload());
});
// watch
gulp.task('watch', function () {
livereload.listen();
gulp.watch(baseDir + '/sass/**/*.scss', ['sass']);
});
My problem is this: when I make a change in a .scss file, it is not recognised in the terminal.. why is this?
My gulp version is
version 3.9.1
Local version 3.9.1
When this happens I assume my directory is off. No errors? No files, lol. Have you tried replacing baseDir with a hard coded call to the directory and see what happens? example
gulp.watch('app/sass/**/*.scss', ['sass']);
and see what happens?
I'm having an issue with Gulp I just simply want to process sass files, optimize images and watch changes on said sass files. For some reason it does run the sass and imagemin tasks correctly but then it tries to watch and after several seconds it jus exits gulp and I'm back a command line like if I manually stopped the tasks. I don't get any errors or warnings it just ends. This is the gulpfile.js:
var gulp = require('gulp'), //import gulp node package
sass = require('gulp-sass'),
imageMin = require('gulp-imagemin');
function errorLog(error){
console.error.bind(error);
this.emit('end;');
}
gulp.task('sass', function(){
return gulp.src('scss/main.scss')
.pipe(sass({
outputStyle: 'compressed'
}).on('error', errorLog))
.pipe(gulp.dest('css'));
});
gulp.task('imagemin', function(){
return gulp.src('img/*')
.pipe(imageMin())
.pipe(gulp.dest('minimg'));
});
gulp.task('watch', function(){
return gulp.watch('scss/**/*.scss', ['sass']);
});
gulp.task('default',['sass','imagemin','watch']);
On command line this is all I see:
[14:02:44] Using gulpfile C:\project-path\gulpfile.js
[14:02:44] Starting 'sass'...
[14:02:44] Starting 'imagemin'...
[14:02:44] Starting 'watch'...
Then after approx. 20secs it exits gulp, I tried looking everywhere and use other post fixes and no luck.
I have the following configuration, but it still does not remove console.log statements:
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
pure_funcs: ['console.log'],
drop_console: true,
comments: false
},
pure_funcs: ['console.log'],
drop_console: true,
comments: false
})
What am I doing wrong?
It's possible that the messages you are getting are debugging messages in the console, rather than console.log. I had a similar issue where I thought using drop_console would suffice. I had to add drop_debugger as well, so given your example, this should remove all console output.
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
drop_console: true,
drop_debugger: true
},
comments: false
})
It is not the reason of uglifyjs in my case. It is caused by babel-loader which will transform console.log to (e = console).log.
I do not know how to fix it now. Finally, I have to use a babel plugin named babel-plugin-transform-remove-console to remove console.
However I do want to use UglifyJsPlugin.
This is a hint for those who can find out a resolution.
I had the same problem with drop_console not working in my react script setup (on Windows 10, React-script version 0.8.5).
Trying to reproduce this problem I created a brand new app, added console.log somewhere in App.js and drop_console: true in webpack.config.prod.js. However in this simple setup drop_console works and console.log is removed.
As it still didn't work in my real app I installed strip-loader:
npm install --save-dev strip-loader
then edited webpack.config.prod.js in node_modules\react-scripts\config (without ejecting from react):
var WebpackStrip = require('strip-loader'); // around line 20
...
// inserted in module/loaders between babel and style loaders, around line 168
{
test: /\.js$/,
loader: WebpackStrip.loader('debug', 'console.log')
},
Sure enough, all console.log statements were removed (npm run build). I then removed all my changes from the config and console.log were still being removed. I uninstalled strip-loader and the build still successfully removes console.log statements.
I cannot explain this behaviour, but at least it works (although somewhat magically).