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
Related
How can I debug Amplify JavaScript functions on VS Code on Windows 10?
This issue came up on github under How to debug amplify function using visual studio code during invocation?, but it's closed and quite old. For example, amplify invoke function is deprecated in favor of amplify mock function.
I've tried this launch.config:
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Create Reort",
"type": "node",
"request": "launch",
"program": "${env:APPDATA}/npm/node_modules/#aws-amplify/cli/bin/amplify",
"args": [
"mock",
"function",
"sayhello",
"--event",
"src/event.json",
"--timeout",
"0"
],
"console": "integratedTerminal"
}
]
}
Which will log the output, but doesn't hit any breakpoints inside the function being executed:
Setup steps:
Install amplify cli
npm install -g #aws-amplify/cli
Initialize amplify. Choose JavaScript with any framework.
amplify init
# Choose your default editor: Visual Studio Code
# Choose the type of app that you're building: javascript
# What javascript framework are you using: none
Add function
amplify add function SayHello
# Choose the runtime that you want to use: NodeJS
# Choose the function template that you want to use: Hello World
Here's a kinda hacky workaround.
As far as I can tell there isn't that much magic to lambdas for a single execution (The special sauce in the runtime environment, event handling, and auto scalability). The Amplify CLI passes in the event object from event.json and calls the function defined as the handler. You can do that in vanilla node js as well.
Create a file like debug.js - you can put it anywhere you want, but mine is in the .vscode directory
const { handler } = require("../amplify/backend/function/sayHello/src")
const event = require("../amplify/backend/function/sayHello/src/event.json")
(async function(){
// invoke
const response = await handler(event)
console.log(response)
})()
Then you can use a normal node js debug launch configuration like this:
{
"name": "Debug Function",
"program": "${workspaceFolder}/.vscode/debug.js",
"request": "launch",
"skipFiles": ["<node_internals>/**"],
"type": "pwa-node"
}
Something a little friendlier / out-of-the-box would be nice, but this at least allows step through debugging without too much extra work.
This used to work in an older version of VS Code. I opened https://github.com/aws-amplify/amplify-cli/issues/6894 to hopefully address the issue.
Meanwhile, here's another hacky workaround suggested here that uses Node's injector. Add this code to the top of your handler method (making sure you remove it before committing):
require('inspector').open(9229, '127.0.0.1', true);
debugger;
Be sure to set a long enough timeout in the amplify mock command in launch.json. To step through the code, you can use Chrome's Node debugger by navigating to about:inspect and clicking on "Open dedicated DevTools for Node".
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());
});
I have a bluemix app using dialog service and I am trying to include the text to speech service using:
var watson = require('watson-developer-cloud');
in my index.js.
I get an undefined error.
I already tried adding npm install watson-developer-cloud on the build pipeline but it does not work. I also tried browserify.
In your app.js declare
var watson = require('watson-developer-cloud');
app.get('/test', function(req, res) { //call all req function here });
In your Index.js Add
$('#text_to speech').click(function(e){
$.ajax({ type: 'GET', data: { text: "text to speech" }, url: '/test' , success: function(response) { console.log('success'); } });
}
Without looking at more of your build pipeline, it's difficult to see if your npm install command is running correctly. I suggest you add watson-developer-cloud to the dependencies list in your package.json
I am successfully able to run the protractor scripts. Below is the protractor.config.js file which I am using to run the protractor scripts.
var Jasmine2Reporter = require('protractor-jasmine2-screenshot-reporter');
var HtmlReporter = require('protractor-html-screenshot-reporter');
var jReporter=new Jasmine2Reporter({
dest: './protractor-result',
fileName: 'protractor-demo-tests-report.html'
});
var reporter=new HtmlReporter({
baseDirectory: './protractor-result', // a location to store screen shots.
docTitle: 'Protractor Demo Reporter',
docName: 'protractor-demo-tests-report.html'
});
exports.config = {
allScriptsTimeout: 11000,
specs: [
'testCaseOne.spec.js' // Hardcoded to run single script.
'*.spec.js' // to run all scripts.
],
capabilities: {
'browserName': 'chrome'
},
baseUrl: 'http://localhost:8000/app/',
framework: 'jasmine2',
};
I am successfully able to run the protractor scripts. Below is the protractor.config.js file which I am using to run the protractor scripts
To run above file, I used below command.
$ npm run protractor
My Expectation:
Now, I would like to run the single protractor script from command prompt. How this can be achieved? This will be useful when I will try to run the protractor test cases from any test management tool.
Can anyone please help me on this.
Try this:
protractor protractor.conf.js --specs='specs/run-just-this-spec.js'
If you want to run a specific test you need use jasmine2 and pass the grep option. https://github.com/angular/protractor/blob/19139272d190dd9c1888d9c3fc2f480f7c6c8edb/docs/jasmine-upgrade.md
Additionally to the given answers, you can use suites, which are sets of specs:
You can have suites which consist only of one spec.
You can run particular spec like this:
protractor --suite=my-suite-name
Also you can temporarily exclude suite or spec in Jasmine using xdescribe and xit (just type x before describe or it).
Also you can focus on particular suite or spec in Jasmin using fdescribe and fit (just type f before describe or it).
Use the node.js process.env object.
var w00t = process.env.TESTED || '*';
exports.config = {
allScriptsTimeout: 11000,
specs: [
w00t + '.spec.js'
],
Prepend TESTED=testCaseOn when you start protractor to execute the desired spec. To execute all scripts add nothing so that *.spec.js will be called.
I built a site with wintersmith in November of 2013. It's live at http://powma.com
I'm coming back to it, but it's not building :-{
I don't mind getting my hands dirty, but I don't know where to start. I'm getting this error:
error Error loading plugin './node_modules/wintersmith-coffee/': Cannot find module './plugin'
Any suggestions?
Thanks!
Mike
UPDATE
Hey, this is because the coffeescript wasn't getting compiled.
I installed it globally, but that didn't help.
$ sudo npm install -g coffee-script
I manually compiled it and moved to other errors. Any suggestions for what's missing?
$ coffee -c plugin.coffee
Here's my config.json:
{
"locals":
{ "url": "http://localhost:8080"
, "title": "Powma"
, "subTitle": "Linking you to technology"
, "motto": "We build exceptions sites and applications to connect people to products, services, and each other."
, "owner": "Michael Cole"
, "profilePicture": "/static/img/profile-professional.jpg"
, "inlineSpriteMaxBytes" : 10000
},
"views": "./views",
"plugins":
[ "./node_modules/wintersmith-coffee/"
, "./node_modules/wintersmith-stylus/"
],
"require": {
"moment": "moment",
"_": "underscore",
"typogr": "typogr"
},
"jade": {
"pretty": true
},
"markdown": {
"smartLists": true,
"smartypants": true
},
"paginator": {
"perPage": 3
}
}
And package.json:
{
"name": "Powma-com",
"version": "0.1.1",
"private": true,
"engines": {
"node": "0.10.17"
},
"dependencies": {
"moment": "2.0.x",
"underscore": "1.5.x",
"typogr": "0.5.x",
"wintersmith": "2.0.x",
"wintersmith-stylus": "git://github.com/MichaelJCole/wintersmith-stylus.git#master",
"wintersmith-coffee": "0.2.x",
"express": "3.4.x",
"sendgrid": "~0.3.0-rc.1.7",
"express-validator": "~0.8.0",
"underscore-express": "0.0.4"
}
}
This is a new dev laptop I'm working with so that may be part of the problem.
I worked around the issue, but didn't fix it. Do I really need to manually compile the coffeescript?
Thanks!
I solved this issue by explicitly specifying plugin.coffee in the config.json file.
{
...other stuff...
"plugins":
[ "./node_modules/wintersmith-coffee/plugin.coffee"
, "./node_modules/wintersmith-stylus/plugin.coffee"
],
...more stuff...
}
It looks like you're missing wintersmith-coffee in node_modules; make sure you have it installed locally with npm install wintersmith-coffee. You can also try removing it from config.json if you're not using it anywhere.
It would also be helpful to see both your config.json and package.json. Also make sure you run an npm install and npm update to make sure you have everything referenced in package.json installed and updated.
Update
Not having CoffeeScript installed could have been the issue. After installing that globally, I'm not sure if all of your shell sessions will pick up the command and use it without being restarted. With a new shell session, see if you can build the site. You can also try testing Wintersmith in isolation of your site. Try generating a sample site with wintersmith new somepath and see if you can run wintersmith build there. That would be a good start for narrowing down your issues between your site and your workstation setup.