forms - 运行 Gulp 任务 web

标签 forms user-interface gulp task

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

示例:拥有一个 Web 表单或任何类型的输入,当您单击任何按钮时,运行一个已经定义的特定任务(运行构建、编译 sass,您可以命名它。)

谢谢

最佳答案

是的,你可以。您只需要在需要时执行 gulp taskname 即可。您需要对执行 gulp 命令的脚本发出 ajax 请求。 F.I.,您可以使用 nodejs 和 express 使用此框架制作一个工作示例:

gulp 文件

    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 安装

然后发球: node server.js

然后去 localhost:3000/index.html

点击按钮后,/scripts/bin/test.js下会出现一个压缩文件

当然,你需要在你的系统上安装 nodejs 和 npm 才能让它工作。这只是一个演示如何执行此操作的工作示例,它可以使用任何其他服务器端技术来完成,唯一的一点是从服务器端的后 Controller 调用 gulpfile 任务。

那么,这对任何事情都有用吗?正如 Sandrina Pereira 所说,gulp 是一个任务运行器,用于构建项目的前端 Assets 。您不应从 Web 应用程序用户触发的脚本中调用它。

但是,您可以设置此类系统以在 localhost/下创建本地网站或应用程序,以通过 UI 管理您的构建,或在您的计算机中执行任何其他任务。我不知道这是否只是一个好主意或理想的主意,但它绝对可行

关于forms - 运行 Gulp 任务 web,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40807582/

相关文章:

Java:创建多个(重复的)按钮执行相同的操作但对自己执行

javascript - 试图让 uglify 和默认 gulp 工作时出现 Gulp 错误

php - Laravel 5.2 - Authenticated User to Change Password - 更新后密码匹配问题

HTML 输入标签语法

jquery - Chrome 选项 JQuery 插件

javascript - 使用 Gulp 如何先编译 Typescript 然后连接结果并对其进行 uglify?

javascript - Handlebars : TypeError: Cannot read property 'helperMissing' of undefined

javascript - Angular JS ng-model-options 不适用于输入

PHP/mysql 未按预期检索

android - 代号一 - AutoCompleteTF 不良行为