运行gulp任务web

是否可以从UI页面运行gulp任务？运行gulp任务web

例子：有一个网页表单或任何类型的输入，当你点击任何按钮，运行已经定义了特定的任务（运行编译，编译青菜，你的名字。）

谢谢

来源

2016-11-25 mstroiu

据我所知，一饮而尽任务意味着管理一个项目，而不是在应用程序本身使用。你使用什么框架/语言？ –

我正在考虑使用** reactjs **。你怎么看？ – mstroiu

答案：我不知道，但如果是这样，你不应该这样做。

为什么？：Gulp旨在成为发展方面的一个任务运行者，运行并由shell（终端/命令行）控制，而不是在Web /浏览器端。

您可以使用React with Gulp。网络行为是在React端处理的。你可以很容易地学习React，有很多文档和教程。我喜欢this one

来源

2016-11-26 15:15:30

谢谢！我知道，这不是为此而建的。我只是想看看是否有可能，甚至有可能不值得。 ** reactjs **看起来更有希望实现我想要实现的目标，即从窗体构建/生成静态html。 :) – mstroiu

是的，你可以。需要时您只需执行gulp taskname。您需要对执行gulp命令的脚本执行ajax请求。 FI，你可以做一个工作示例与此骨架，使用和的NodeJS表示：

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!'); 
});

公共/ 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" 
    } 
}

脚本/ src目录/ test.js

function test(){ 
    console.log('this file should be minified to bin/test.js on click'); 
    //end. 
}

随着该样板，你可以只安装依赖 npm install

再服： node server.js

然后去 localhost:3000/index.html

点击该按钮后，缩小的一个文件应该会出现在/scripts/bin/test.js

当然，你需要在系统上安装和的NodeJS NPM来得到这个工作。只是一个演示如何做的实例，可以使用任何其他服务器端技术来完成，唯一的一点是从服务器端的后控制器调用gulpfile任务。

那么，这会对任何事情有用吗？。正如桑德里纳佩雷拉所说，吞咽是一个任务跑步者意味着建立您的项目的前端资产。您不应该从Web应用程序的用户触发的脚本中调用它。

但是，你可以建立这种系统的创建一个本地网站或应用在本地主机/来管理自己的作品，或者在你的机器执行其他任务，从UI。我不知道这是否仅仅是一个好的或可取的想法，但它肯定是可行的。

来源

2016-11-26 15:52:04 Sergeon

谢谢你的非常详细的答案！我必须找到一个更好的解决方案来从窗体构建/生成静态html。我正在** ** reactjs **，我认为这是一个好的开始。再次感谢你。 – mstroiu

运行gulp任务web

回答

相关问题