运行 Gulp 任务网页

Question

运行 Gulp 任务网页

formsuser-interfacegulptask

3

是否能够从UI页面运行gulp任务？

例如：拥有一个Web表单或任何类型的输入，当您点击任何按钮时，运行一个已定义和特定的任务（运行构建、编译SASS等）。

谢谢

- mstroiu

据我所知，Gulp 任务旨在管理项目，而不是在应用程序本身中使用。您使用的是哪个框架/语言？ - Danny Cullen

我在考虑使用 ReactJS。你觉得呢？ - mstroiu

2个回答

1

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

为什么？：Gulp 旨在成为开发过程中的任务运行器，由 shell（终端/命令行）运行和控制，而不是在 Web/浏览器端运行。

你可以使用 Gulp 来与 React 配合使用。Web 行为由 React 处理。你可以很容易地学习 React，有很多文档和教程。我喜欢 this one。

- sandrina-p

谢谢！我知道gulp不是为此而建立的。我只是想看看是否可能，即使可能也不值得。reactjs对于我想要实现的从表单构建/生成静态HTML来说更有前途。 :) - mstroiu

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sergeon · Accepted Answer

是的，你可以。只需要在需要时执行 gulp 任务名称 即可。你需要向一个执行 gulp 命令的脚本发送 ajax 请求。例如，你可以使用 nodejs 和 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.
}

有了这个样板程序，你只需安装依赖项 npm install 然后启动服务： node server.js 然后前往： localhost:3000/index.html 点击按钮后，一个压缩文件应该会出现在 /scripts/bin/test.js下。

当然，你需要在你的系统上安装nodejs和npm才能使其正常工作。这只是一个演示如何做的工作示例，使用其它服务器端技术也可以实现，唯一的要点是从服务器端的post控制器中调用gulpfile任务。

那么，这对于任何事情有用吗？正如Sandrina Pereira所说，gulp是一个任务运行器，用于构建项目的前端资源。你不应该从web应用程序用户触发的脚本中调用它。

但是，你可以设置这种系统来创建一个位于localhost/下的本地网站或应用程序来管理你的构建，或者从UI执行你机器上的任何其他任务。我不知道这是一个好主意还是一个理想的想法，但肯定是可行的。