運行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

回答

相關問題