I use the latest Chrome version on Mac (83.0.4103.116), Gulp + Browser-sync.
In DevTools, after the Browser-sync applies the changes in style.css and reloads the page, I can't edit any style, it looks like default and blocked:
screenshot
It's very strange that when I'm reloading the page manually (Cmd+R), the styles are available for change again till the next Browser-sync reloading.
screenshot
I've tried to reload the browser, to uninstall and install Browser-sync again, I didn't change the gulpfile.js.
So I can't even guess what's going wrong. What am I missing?
Gulpfile.js code:
var gulp = require('gulp');
var sass = require('gulp-sass');
var bsync = require('browser-sync').create();
gulp.task('default', function() {
bsync.init({
server: ''
});
gulp.watch('*.html')
.on('change', bsync.reload);
gulp.watch('sass/**/*.scss')
.on('change', gulp.series('launch-sass'))
});
gulp.task('launch-sass', function() {
return gulp.src('./sass/style.scss')
.pipe(sass())
.pipe(gulp.dest('./css'))
.pipe(bsync.stream());
});
Related
Is there any way to read ionic 3 application version for all platforms(android, ios and web)?
I tried with cordova-plugin-app-version.
this.appVersion.getVersionNumber().then(response => {
console.log('App version', response);
})
Version is not shown in browser.
You can read version from package.json like this:
const environment = {
VERSION: require('../../../package.json').version
};
The way I do it is by having a global variable app_version declared in the index.html that I update everytime I make a new version. That globale variable is then accessible everywhere in your app regardless of what platform you are in.
In your index.html :
<script>
var app_version = require('../package.json').version;
</script>
Then in any page or component where you need to use it Just add this before #Component(...) declaration :
declare const app_version;
app_version is now available to be assigned to a component property and displayed if necessary;
I am working with a web team and we keep all our files on a local shared server in the office. ( we are slowly moving everything over to git so please no comments about how dumb we are for not using git. Thanks! )
We are using gulp to compile our sass to css and when one of us compiles we are fine but once someone else tries to run a node process and compile with gulp we get the following error....
[10:12:53] Starting 'sass'...
[10:12:53] Starting 'watch'...
[10:12:54] Finished 'watch' after 173 ms
[10:12:54] 'sass' errored after 442 ms
EPERM: operation not permitted, chmod '/the file path/'
I have tried using chmod to change the file permissions but I don't think that is the issue. I use atom as my editor and some of the other developers on the team use sublime.
I have read that some editors can lock files. Not sure if this is the cause but if it is I don't know how to fix this. Is the only solution to this problem to use git and have local copies on our own personal computers?
Thanks in advance!
gulpfile.js
// Include gulp
var gulp = require('gulp');
// Include Our Plugins
var sass = require('gulp-sass');
var plumber = require('gulp-plumber');
var cleanCSS = require('gulp-clean-css');
var sourcemaps = require('gulp-sourcemaps');
var sassOptions = {
errLogToConsole: true,
outputStyle: 'nested' // Styles: nested, compact, expanded, compressed
};
// Compile Sass file to CSS, and reload browser(s).
gulp.task('sass', function() {
return gulp.src('includes/scss/*.scss')
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(sass.sync(sassOptions))
.pipe(sass.sync().on('error', sass.logError))
.pipe(sourcemaps.write())
.pipe(gulp.dest('includes/css'));
});
gulp.task('minify-css', function() {
return gulp.src('includes/css/*.css')
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(sourcemaps.write())
.pipe(gulp.dest('includes/css'));
});
// Watch Files For Changes
gulp.task('watch', function() {
gulp.watch('includes/scss/**/*.scss', ['sass']);
});
// Default Task
//gulp.task('serve', ['sass', 'minify-css', 'watch']);
gulp.task('serve', ['sass', 'watch']);
This happens because you need to run your gulpfile as admin.
So run sudo -i, insert your admin password, and then just run again.
I was on the same problem, it worked for me.
Sometimes this is caused by Watch. But more often this is because Gulp preserve the flags in the gulp.dest command. If you have a source file with read-only flags. You have to overwrite the flags each time your source file is included in gulp.dest command.
This way:
.pipe(gulp.dest('includes/css', mode: 0o777));
That problem has also happened to me. What I did was start from a terminal as root, and just write gulp to me I worked.
Just uninstall your gulp :
npm uninstall gulp -g
then
npm install gulp -g
Set path in environment valiable in windows.
Restart your system or cmd prompt.
I was getting the error on compile-sass. I had to delete the destination .css file, then all was well.
Is possible to run gulp tasks from a UI page ?
Example: Having a web form or any type input and when you click on any button, to run a already defined and specific task(run build, compile sass, you name it.)
Thank you
Yes, you could. You just need to execute gulp taskname when needed. You would need an ajax request to a script that executes the gulp command. F.I., you can make a working example with this skeleton, using nodejs and express:
gulpfile
gulp.task('minify' , function(){
console.log('gulp called!');
gulp.src('scripts/src/test.js')
.pipe(minify() )
.pipe(gulp.dest('scripts/bin/'));
});
server.js
var express = require('express')
var app = express();
var exec = require('child_process').exec;
app.use(express.static('public'))
app.post('/send' , function(req , res){
console.log('this was called');
exec('gulp minify');
res.send('success!');
});
app.listen(3000, function () {
console.log('Example app listening on port 3000!');
});
public/index.html
<html>
<head>
</head>
<body>
<button onclick=send()>Execute gulp minify</button>
</body>
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script>
function send(){
$.ajax({
url : 'http://localhost:3000/send',
method : 'POST',
success : function(res){
console.log(res);
},
error : function(response){
console.log('Error!');
console.log(response);
}
});
}
</script>
</html>
package.json
{
"name": "gulp-from-script",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.14.0",
"gulp-uglify": "^2.0.0"
}
}
scripts/src/test.js
function test(){
console.log('this file should be minified to bin/test.js on click');
//end.
}
With that boilerplate, you can just install the dependencies
npm install
then serve:
node server.js
And then go to
localhost:3000/index.html
After clicking the button, a minified file should appear under /scripts/bin/test.js
Of course you need nodejs and npm installed on your system to get this to work. Is just a working example demonstrating how to do it, it could be done with any other server side technology, the only point is to call the gulpfile task from a post controller on your server side.
So, would this be useful for anything? As Sandrina Pereira states, gulp is a task runner meant for building the front-end assets of your project. You shouldn't call it from a script fired by a user of a web application.
However, you could set up this kind of system to create a local website or app under localhost/ to manage your builds, or perform any other task in your machine, from a UI. I don't know if that is just a good or desirable idea, but it is definitely doable.
Answer: I don't know, but if so, you shouldn't do it.
Why?: Gulp is meant to be a task runner on developing side, running and controlled by a shell (terminal /command line), not on web / browser side.
You can use React with Gulp. Web behaviour is handle on React side. You can easily learn React, there are a lot of documentation and tutorials. I like this one
I'm using the Karma Test Runner and I've configured it to use Chrome and PhantomJS like this:
browsers = ['Chrome', 'PhantomJS'];
How can I configure Karma to open these browsers with certain command line arguments, like --diable-web-security in the case of Chrome, and --web-security=no in the case of PhantomJS?
I suppose one option would be to write a custom browser script, but that seems like overkill if there is some feature in Karma I don't know about that handles this case.
Something like this should work:
// karma.conf.js
module.exports = function(config) {
config.set({
browsers: ['Chrome_without_security','PhantomJS_without_security'],
// you can define custom flags
customLaunchers: {
Chrome_without_security: {
base: 'Chrome',
flags: ['--disable-web-security']
},
PhantomJS_without_security: {
base: 'PhantomJS',
flags: ['--web-security=no']
}
}
});
};
More information here: https://github.com/karma-runner/karma-chrome-launcher#configuration
One solution I found, which may not be the most elegant, is to actually modify Karma's launcher scripts for each browser. This has solved the problem.
How to see console.log messages of a website using android emulator?
From Rich Chetwynd's short article "Javascript debugging on Android browser".
You can log javascript errors and console messages from your Android device or emulator. To do this you first need to install the Android SDK and USB drivers and enable USB debugging on the actual device.
To check if the device is connected correctly you can run the following cmd from your Android SDK tools directory and you should see a device in the list
c:\android sdk..\platform-tools\adb devices
You can then use the Android Debug Bridge to filter debug messages so that you only see browser related messages by running the following cmd.
c:\android sdk..\platform-tools\adb logcat browser:V *:S
By default the log is written to stdout so you will see any Javascript errors or console.log messages etc written to the cmd window.
Further details: Logcat CLI tool docs.
If you have started the emulator from Eclipse with the ADT plugin, you will see all JavaScript console logs directly under the LogCat view :
Window -> Show View -> Android -> LogCat
If you are using Android Studio; you can open your Logcat (Alt+6) and filter for: :CONSOLE
Filtering for only :CONSOLE (rather than INFO:CONSOLE) will display all types of console messages (including ERROR, WARN, etc).
You could add some JavaScript temporarily like...
var console = {
log: function(msg) { alert(msg); }
};
Ugly as hell, but it works.
I hijacked the console.log using this code:
function logManager() {
var self = this;
self.init = function () {
console.log('logmanager initialized');
var old = console.log;
self.logger = document.getElementById('log');
console.log = function (message, options) {
if (typeof message == 'object') {
self.logger.innerHTML = (JSON && JSON.stringify ? JSON.stringify(message) : message) + '<br />' + self.logger.innerHTML;
} else {
self.logger.innerHTML = message + '<br />' + self.logger.innerHTML;
}
}
}
self.toggleLogVisibility = function () {
return $(self.logger).toggle();
};
}
And consume it like so in your html with your own styling (absolute top right is what I used)
<div id="log" class="log">
Application loaded...
</div>
And in your jscript (run this on page loaded as the log element has to exist)
document.lmgr = new logManager();
document.lmgr.init();
Open this url on your chrome
chrome://inspect
Command - get log from the emulator
adb -e logcat
adb.exe can be found at $your_installation_path$\android sdk\platform-tools
more detailed
https://learn.microsoft.com/ru-ru/xamarin/android/deploy-test/debugging/android-debug-log?tabs=windows
If you cannot run adb logcat browser:V *:S because of zsh, you need to run noglob adb logcat browser:V *:S. Rationale: https://github.com/ohmyzsh/ohmyzsh/issues/2901