So I am using grunt to help me develop sites.
For last two weeks I am having issues with Browsersync/Watch.
When I am making changes to a php files, browsersync doesn't detect any changes. Even, when I am reloading the site manually, source code is not updated. Most funny part is, this code gets updated after "some time" or when I am restarting grunt.
watch: {
php: {
files: ['*.php', '**/*.php'],
}
},
// Run Browser Sync
browserSync: {
default_options: {
bsFiles: {
src: [
"**/*.php",
"*.php",
]
},
options: {
watchTask: true,
proxy: 'g.test',
}
}
}
Does anyone had familiar issue?
Do you have a body tag in your PHP files?
Also, when running grunt, do you have a script (like one below) injected under body?
<script id="__bs_script__">
//<![CDATA[document.write("<script async src='/browser-sync/browser-sync-client.js?v=2.26.7'><\/script>".replace("HOST", location.hostname));
//]]>
</script>
Related
I am using 'deno' and 'oak'. for auto refreshing I am using 'denon' which is similar to 'nodemon' in nodejs. as a template engine, third party module, I am using - 'denjucks'. Whenever, I do any change in template code and save, server is not restarting automatically. How to solve this issue?
You can use exts options and add html.
{
"scripts": { /* */ },
"watcher": {
// The number of milliseconds after the last change.
"interval": 350,
// The file extensions that it will scan for.
"exts": ["js", "ts", "json", "html"],
// The globs that it will scan for.
"match": ["*.*"],
// The globs that it will not scan for.
"skip": ["*/.git/*"],
// Use the legacy file monitoring algorithm. (walking)
"legacy": false
}
}
Solved the issue. In denon.json file added following -
"watcher": {
"exts": ["js", "ts", "json", "html"]
}
This adds html file in watcher list.
I have created a custom module and added requires-config.js (app\code\Namespace\Modulename\view\frontend).
var config = {
map: {
'*': {
test: 'https://example.com/test.js'
}
}
};
After that I have deploy the static content, now I can see the external js has added in following location (pub\static_requirejs\frontend\Magento\luma\en_US),but still external js is not loaded in page source (using console).
Still I need to add the js files in layout?
<head>
<link src="https://example.com/test.js"/>
</head>
Its good practise to put your js in Modulename/view/frontend/web/js folder rather than loading from url.
var config = {
"map": {
"*": {
"test": "Modulename/js/test"
}
}
};
Also you don't need to add .js extenstion in the require js file.
then check it will load
Please clear the cache and also do static content deploy
I can't seem to both reload the server and run sass in my gulp setup. Everything works fine if I save my styles.scss file twice. The server reloads but sass does not run when I only save once.
I've tried to run the 'sass' task as a dependency of 'serve' but that made things worse. Can someone please point me in the right direction?
//run sass
gulp.task('sass', function () {
return sass('client/scss/styles.scss')
.on('error', function (err) {
console.error('Error!', err.message);
})
.pipe(gulp.dest('client/css/'));
});
//run sass again when file is updated
gulp.task('watch', function(){
gulp.watch('client/scss/*.scss', ['sass']);
});
//reload server when sass file updates
gulp.task('serve', function() {
var server = gls.new('server.js');
server.start();
gulp.watch(['client/scss/*.scss'], server.notify);
gulp.watch('server.js', server.start);
});
//initial run
gulp.task('default', ['serve', 'sass', 'watch']);
The problem is that you're watching your scss files inside the serve task.
So the flow currently looks like this:
scss changed
watch task starts compiling sass AND server reloads page with old
css (too soon)
final css is compiled
If you then save scss for the second time, this all happens again and it's now OK because the css was refreshed during the first run.
You should be watching css files in the serve task. This way, the flow will be:
scss changed
watch task starts compiling sass
final css is compiled
server task reloads page with new css
So the solution is to simply change the serve task like this:
gulp.task('serve', function() {
var server = gls.new('server.js');
server.start();
gulp.watch(['client/css/*.css'], server.notify);
gulp.watch('server.js', server.start);
});
I need to inject custom CSS files everytime they are created after being compiled by gulp-less. So I tried to use wiredep with custom configurations, but without success.
I changed the tag from 'bower:css' to 'custom:css', specifically to my custom task. The bower:css for default wiredep injection is still there. But after run myinjection task nothing is injected even running the task without errors.
Another weird thing, when I run my task, the files injected by wiredep (the default) disappear.
What I'm missing?
Basicaly my files structure is like this:
|---app
|---styles
|---***
*.css
*.html
.custom.json
I'm not sure if I really need a file similar to bower.json, but I made may own custom.json
{
"name": "custom",
"version": "0.0.1",
"main": [
"app/styles/**/*.css",
"app/scripts/**/*.js //pretend to inject custom js later
]
}
The task in gulpfile.js is like this:
gulp.task('myinject', function () {
var myinject = require('wiredep').stream;
var combined = Combine (
gulp.src('app/*.html'),
myinject({
directory: 'app',
bowerJson: require('./custom.json'),
dependencies: false,
html:
{
block: /(([ \t]*)<!--\s*custom:*(\S*)\s*-->)(\n|\r|.)*?(<!--\s*endcustom\s*-->)/gi,
detect: {
js: /<script.*src=['"](.+)['"]>/gi,
css: /<link.*href=['"](.+)['"]/gi
},
replace: {
js: '<script src="{{filePath}}"></script>',
css: '<link rel="stylesheet" href="{{filePath}}" />'
}
}
}),
gulp.dest('app')
);
combined.on('error', function(err) {
console.warn(err.message);
});
return combined;
});
Thanks in advance
I had a similar issue that I resolved with gulp-inject rather than wiredep.
Wiredep works fine with me when I need to include a third-party dependency (e.g. a bower package with a valid main file declared in the bower.json or a file with the same name as the directory).
However, when you want to include only a specific file (e.g. only the main.css of html5-boilerplate) gulp-inject is much simpler. Here is an extract of the doc :
gulp.task('index', function () {
var target = gulp.src('./src/index.html');
var sources = gulp.src(['./src/**/*.js', './src/**/*.css'], {read: false});
return target.pipe(inject(sources))
.pipe(gulp.dest('./src'));
});
I'm trying to get grunt working, with grunt-contrib-watch and grunt-contrib-compass.
So far, my Gruntfile looks like this:
module.exports = function (grunt){
grunt.initConfig({
compass : {
dist : {
options : {
debugInfo : 'true'
}
}
},
watch : {
files : ['*.html', 'js/*', 'sass/*'],
task : ['compass'],
options : {
livereload: true,
port : 35729
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch') ;
grunt.loadNpmTasks('grunt-contrib-compass') ;
grunt.registerTask('default', ['watch'])
} ;
I'm using chromes live-reload extension.
If I then run 'grunt -v', I can see that grunt watches my html and my sass files as expected. My browser tab reloads automatically, as expected.
In a browser tab I go to this address:
http://localhost:35729
However, in my browser I only see this upon loading and reloading:
{
tinylr: "Welcome",
version: "0.0.4"
}
I don't see my index.html. Just the object.
What do I need to do in order to see my site?
http://localhost:35729 is the address of the live reload server, not your website. Your website still needs to be served from it's own address/port, such as http://localhost:8000. Either through the grunt-contrib-connect task, some other node.js server or some server that serves files apache/nginx.
http://localhost:35729 is only used to load the live reload script into your page: <script src="http://localhost:35729/livereload.js"></script> and then upon changes will use a web socket to trigger and update your page on your website.
If you run with npm start, it will running on reload server.
So if you wanted to serve your website.
Try to use Multiplex