管理パネルから共有ホスティングで一晩ホスティングしてGulpを開始します

管理者パネルを備えたWebサイトがあり、このプロジェクトでGulpを使用している、または使用するつもりですか？ Gulpリソースジェネレーターの制御を含め、管理パネルから可能な限りサイトを操作しますか？ 次に、カットの下で、管理パネルからサーバー上のサーバーでGulpを管理する簡単な方法を紹介します。

これは、PHPの管理パネルを使用してサーバーでGulpを設定および実行するための小さなチュートリアルです。 Gulpは、リソースの1回限りのビルドではなく、監視モードで起動されることが理解されています。 展開ツールを使用してプロジェクトを操作していて、ローカルで実行していない場合に最適です。 同時に、たとえば、ローカルでSCSSをビルドするたびに、すでに疲れている結果を入力します。

1.ホスティングの微妙さ

私のホスティングではNodeサポートがありませんでした。 サイトの隣のフォルダーに個別に配置する必要がありました。 インストールするバージョンは関係ありません。Node.jsv5.12.0を使用しました 。 インストールするには、ホスティングのどこかでアーカイブを解凍し、NodeJS bin



をPathに追加するだけです（詳細は下記）。

ホスティングでサイトホスティングが有効になっている場合は、Nodeフォルダーをパブリックに追加する必要があることに注意してください。 そうでない場合、gulpプロセスはNodeへのアクセスを拒否されます。

2.ノードとGulpの構成

ここで、サーバーでGulpを実行するために必要なすべてを準備します。 原則として、SSHを介してすでに完全に使用できますが、主な目標は管理パネルを使用して管理を構成することです。

2.1ノードの構成

すでにホスティングでnpmを使用しており、すでにノードがある場合、作業は完了しており、すぐにステップ2.2に進むことができます。

サーバーにGulpをインストールし、実行するために必要なすべてのものをインストールするには、プロジェクトルートにpackage.json



ファイルを作成する必要があります。 プロジェクトのルートがpublic_html



フォルダーよりわずかに高いことを心から願っています。

package.json



ファイルのサンプルコンテンツ：

 { "name": "Project Namet", "version": "1.0.0", "devDependencies": { "browser-sync": "^2.14.0", "gulp": "~3.9.0", "gulp-autoprefixer": "^3.1.0", "gulp-browserify": "~0.5.1", "gulp-clean-css": "^2.0.12", "gulp-concat": "~2.6.0", "gulp-notify": "^2.2.0", "gulp-plumber": "^1.1.0", "gulp-sass": "~2.1.0", "gulp-sourcemaps": "^1.6.0", "gulp-uglify": "^1.5.1", "gulp-util": "^3.0.7" }, }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Gulpのプラグインのセットはどれでもかまいません。使用するものとその必要性を正確に確認する必要があります。 BrowserSyncについては、起動できませんでした。 なんで？ 考えられる問題のリストの最後を読んでください。

次に、SSHを介して事前にサーバーに接続し、手動でインストールされたノードがスタートアップディレクトリに入るようにPathを構成する必要があります（これは、サイトプロセスがこのノードまたは少なくとも何かを見ることをまったく保証しません。独自の環境がありますパス：すでにPHPを使用して設定します。）

package.json



ディレクトリからGulpとそのコンポーネントをインストールします。

 npm install
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このディレクトリにnode_modules



フォルダーがあり、 node_modules



を起動するために必要なすべてのものがあります。

次に、Gulpを構成する必要があります。

2.2プロジェクトのGulpの構成

一般に、これを行う方法を知っていれば素晴らしいと思いますが、いずれにしても、Gulp構成ファイルの設定に関する記事がたくさんあります。私のプロジェクトの例を挙げます。

これを行うには、おおよその塗りつぶしでpackage.json



ファイルの隣にgulpfile.js



ファイルを作成します。

 'use strict'; var gulp = require('gulp'); var plumber = require('gulp-plumber'); var notify = require("gulp-notify"); var sass = require('gulp-sass'); var minifyCss = require('gulp-clean-css'); var sourcemaps = require('gulp-sourcemaps'); var autoprefixer = require('gulp-autoprefixer'); var browserSync = require('browser-sync').create(); var errorHandler = { errorHandler: notify.onError({ title: '   <%= error.plugin %>', message: ": <%= error.message %>" }) }; gulp.task('scss', function(){ gulp.src('./scss/**/*.scss') .pipe(plumber(errorHandler)) .pipe(sourcemaps.init()) .pipe(sass()) .pipe(autoprefixer()) .pipe(minifyCss({compatibility: 'ie8'})) .pipe(sourcemaps.write({ includeContent: false })) .pipe(gulp.dest('./public_html/css/user')); }); gulp.task('compiler', [ 'scss' ]); gulp.task('watch', ['compiler'], function(){ /* browserSync.init({ host: 'http://mysite.ru', online: false, files: [ './public_html/css/user/app.css' ] }); */ gulp.watch('./scss/**/*.scss', ['scss']); }); gulp.task('default', ['watch']);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

例としてCSSのみを示しますが、必要に応じてGulpを構成できます。

gulpfile.js



横にgulpfile.js



フォルダーがあり、すべてのSCSSファイルの完全な構造がそこにあることが理解されます。 どちらかといえば、 gulpfile.js



SCSSファイルへのパスを見つけて変更することは難しくgulpfile.js



ません。そのうち2つしかありません。

1. CSS生成gulp.src('./scss/**/*.scss')
   
   
   
   
2. Watcher gulp.watch('./scss/**/*.scss', ['scss']);
   
   
   
   場所gulp.watch('./scss/**/*.scss', ['scss']);
   
   
   
   

2.3ツールの準備状況の確認

すべてが正しく行われた場合、SSH経由で接続することにより、 gulpfile.js



があるフォルダーに移動し、そこで実行できます。

 gulp
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

同時に、Gulpからのデバッグ、または次のポイントに進む前に解決する必要がある警告が表示されます。 問題は、現在接続しているユーザーのPath変数の構成にある可能性があります/node_modules/.bin



自体がPathにインストールする必要があるNodeのbin



フォルダーと/node_modules/.bin



フォルダーが必要です。

他の種類の問題は、 gulpfile.js



誤った構成に関連します。

3 Gulpで動作するようにPHPを準備する

これを行うには、まず特定のプログラミング言語に依存せずに、これが一般的にどのように機能するかを理解してから、使用するPHPを決定する必要があります。 幸いなことに、多くの選択肢はありませんし、考えることはほとんどありません。

アルゴリズムは次のとおりです。

• バックグラウンドでGulpプロセスを開始し、管理パネルから追加を要求するときにPIDをどこかに保存する必要があります。
• シャットダウンを要求する場合、PIDを確認し、その下で実行されているGulpプロセスを強制終了する必要があります。
• 統計を照会する場合、現在のPIDで実行されているGulpプロセスの存在を確認し、結果を返すことができます。
• Gulpバックグラウンドプロセスの出力全体をファイルに保存する必要があります。必要に応じて、必要に応じてこのファイルの内容を管理パネルに送信するように構成することもできます（この記事ではこの項目については説明しません。宿題として実装できます）。

今、あなたが必要とするPHPツールは簡単に思えます。

一番最初で最も簡単なのは、PHPサイトでの exec



の議論のどこかにあるExecProcess



クラスです。 私はそれを少し修正し、これを使用します：

 <?php class ExecProcess { private $pid; private $command; private $root; //      ,     Path (     `bin`  Node  `/node_modiles/.bin`) private $envList = []; //   ,      .    . private $additional = []; private function runCom() { $command = ""; if(!empty($this->envList)){ $command .= 'export PATH=$PATH:'.implode(":", $this->envList).'; '; } if(!empty($this->root)){ $command .= 'cd '.$this->root.'; '; } if(!empty($this->command)){ $command .= 'nohup ' . $this->command . ' > /dev/null 2>&1 & echo $!;'; } if(!empty($this->additional)){ $command .= implode("; ", $this->additional); } exec($command, $op); $this->pid = intval($op[0]); } public function setPid($pid) { $this->pid = $pid; } public function setRoot($root) { $this->root = $root; } public function setEnv($envList) { $this->envList = $envList; } public function setCommand($commandLine) { $this->command = $commandLine; } public function setAdditional($additionalCommands) { $this->additional = $additionalCommands; } public function getPid() { return $this->pid; } public function status() { if(empty($this->pid)) return false; $command = 'ps -p ' . $this->pid; exec($command, $op); return isset($op[1]); } public function start() { $this->runCom(); } public function stop() { if(empty($this->pid)) return true; $command = 'kill ' . $this->pid; exec($command); return !$this->status(); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、 GulpProcess



を実行し、その状態を監視するクラスはGulpProcess



です：

 <?php class GulpProcess { //   ,    PID  Gulp  private $tempPidFile = TEMP_DIR . "/gulpTaskPid.tmp"; /** @var ExecProcess */ private $execProcess; public function __construct() { $this->execProcess = new ExecProcess(); //         (gulp).    ,         index.php.  , ,    gulpfile.js $this->execProcess->setRoot("../"); //    ( )  Node  node_modules  Path $this->execProcess->setEnv([ NODE_MODULES_BIN, NODE_BIN, ]); /* .  ) $this->execProcess->setAdditional([ "echo \$PATH", "pwd", "whoami", "ps -ela", "id", ]); */ $this->execProcess->setCommand('gulp'); } public function start() { if(!$this->isActive()){ $this->execProcess->start(); $this->setPid(); return $this->checkStatus(); } return true; } public function stop() { if($this->isActive()){ $this->execProcess->stop(); $this->clearPid(); } return true; } public function isActive() { return $this->checkStatus(); } private function getPid() { if(is_file($this->tempPidFile)){ $pid = intval(file_get_contents($this->tempPidFile)); $this->execProcess->setPid($pid); return $pid; } return null; } private function setPid() { file_put_contents($this->tempPidFile, $this->execProcess->getPid()); } private function clearPid() { if(is_file($this->tempPidFile)){ unlink($this->tempPidFile); } $this->execProcess->setPid(null); } private function checkStatus() { $pid = $this->getPid(); if(!empty($pid)){ if($this->execProcess->status()){ return true; } $this->clearPid(); return false; } return false; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

すべてが簡潔で明確なようです。 すべてを管理パネルに結び付けることは残っています。

4.管理パネルのアクションの構成

どのシステムを使用し、どのようにアクションを操作するかは、あなただけが知っています。 私の行動の例を挙げますが、すべてがすでに明白であるはずです：

 <?php class Admin{ //... public function startGulpProcess() { $gulpProcess = new GulpProcess(); return $gulpProcess->start(); } public function stopGulpProcess() { $gulpProcess = new GulpProcess(); return $gulpProcess->stop(); } public function getGulpStatus() { $gulpProcess = new GulpProcess(); $this->jsonData["is_active"] = $gulpProcess->isActive(); return true; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

パラグラフ3で述べたように、 ExecProcess



プロセスから現在の出力を取得することもできますが、このためには、 ExecProcess



クラスを変更して、すべての出力を/dev/null



ではなく特定のファイルに書き込む必要があります。

まとめ

サーバー上で（共有ホスティング上であっても）Gulpプロセスを管理するための非常にシンプルで快適なツールが手元にあり、ローカルマシンでリソースをコンパイルする必要はなく、展開ツールを使用します。

これらの開発はすべて、Composerプラグインで美しくラップし、特定のシステム（Yii2など）にサンディングできます。 CMSを転送するときに、必ずこれを実行します。

管理パネルを介してサーバー上のリソースファイルを編集できる機能を備えたコンパートメントでは、稼働中のマシンをセットアップする必要のない強力なツールを使用できます。 どこからでも、どのコンピューターからでも、顧客のリクエストに応じて、マイナーなバグを緊急に修正できます 。

考えられる問題と解決の試み