We start Gulp with votcher on a usual hosting through adminpanel

Do you have a site with admin panel and are you using or just going to use Gulp in this project? Do you want to work as much as possible with the site through the admin panel, including the control over the Gulp resource generator? Then, under the cut, I'll show you an easy way to manage Gulp with the servers on the server directly from the admin panel.

This is a small tutorial on setting up and running Gulp on the server using any PHP admin panel. It is understood that Gulp is launched not for a one-time assembly of resources, but in the mode with watch. Great if you work with a project through Deployment Tools and you don’t have it running locally. In this case, each time the build, for example, SCSS locally and the result is already tired of uploading.

1. The subtleties of hosting

So it happened, on my hosting there was no support for Node. I had to put it separately in my folder next to the sites. What version to install, it does not matter, I used Node.js v5.12.0 . To install, simply unzip the archive somewhere to your hosting and add the NodeJS bin to the Path (more below).

Pay attention, if site hosting is turned on on your hosting, then the folder with Node needs to be added to the public ones. Otherwise, the gulp process will be denied access to the Node.

2. Configuring Node and Gulp

Here you will prepare everything you need to run Gulp on the server. In principle, it will already be possible to use it perfectly via SSH, but the main goal is: Configure management through admin panel.

2.1 Configure Node

If you have already used npm on the hosting and you already have a Node there, then the floor is done and you can skip to step 2.2.

To install on the Gulp server and everything you need to run it, you will need to create the file package.json in the project root. I sincerely hope that you have the root of the project just above the public_html folder.

Sample package.json file contents:

 { "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" }, } 

A set of plug-ins for Gulp can be any, you need to look at what you use and why you need it. As for BrowserSync, it failed to start it. Why? Read at the very end of the list of possible problems.

Next, having connected to the server via SSH in advance, you have to configure the Path so that the manually installed Node gets into the launch directories (this, by the way, does not guarantee that the site’s process will see this Node or at least something. There Path. You will configure it already through PHP.).

Install Gulp and its components from the directory where package.json :

 npm install 

You will have a folder node_modules in this directory, which will have everything you need to run Gulp.

Now we need to configure Gulp.

2.2 Configure Gulp for the project

In general, it would be great if you could do this, but in any case there are many articles on setting up a Gulp configuration file, I’ll just give an example from my project.

To do this, create a gulpfile.js file next to the package.json file with approximate filling:

 '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']); 

I’ll show the example of generating only CSS, but you can configure Gulp as you like.
This implies that next to gulpfile.js is the gulpfile.js folder, in which the full structure of all SCSS files. If anything, then finding and changing the path to the SCSS files in gulpfile.js not difficult, there are only two of them:

1. Place where gulp.src('./scss/**/*.scss') CSS generation task looks gulp.src('./scss/**/*.scss')
2. The place where Watcher gulp.watch('./scss/**/*.scss', ['scss']);

2.3 Tool availability check

If everything is done correctly, now you can, having connected via SSH, go to the folder with gulpfile.js and execute there:

 gulp 

At the same time, we will see some kind of debug from Gulp, or warnings that you will have to resolve before proceeding to the next item. I’ll say /node_modules/.bin that the problem may be in configuring the Path variable for the currently connected user, it must contain the bin folder from Node and the /node_modules/.bin folder, which NPM should install in the Path itself.

Other kind of problems will most likely be related to the incorrect configuration of gulpfile.js .

3 Preparing PHP to work with Gulp

To do this, you first need to understand how it will work in general, without relying on a specific programming language, and only then decide what you need to use from PHP. The benefit of the options is not very much, and there is almost nothing to think through.

The algorithm is as follows:

• It is necessary when prompting for inclusion from the admin panel to start the Gulp process in the background and save its PID somewhere.
• When you request a shutdown, you need to check the PID and kill the Gulp process running under it.
• When requesting statistics, you can check the existence of the Gulp process running on the current PID and return the result.
• The entire output of the Gulp background process should be saved to a file and, if desired, you can also configure sending the contents of this file to the admin panel on request (The article does not deal with this item; you can implement it as a home task).

It seems simple, now, what PHP tools you will need.

The very first and simplest is the ExecProcess class somewhere from the exec discussion on the PHP site. I modified it a little and use this:

 <?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(); } } 

And the class that will launch Gulp and control its state, 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; } } 

It seems everything is concise and clear. It remains to tie it all to adminpaneli.

4. Setting up adminpanel actions

What system do you use and how do you work with action games only you know. I will give an example of my action games, but everything should be obvious now:

 <?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; } } 

As mentioned in paragraph 3, you can also get the current output from the Gulp process, but for this you first need to modify the ExecProcess class ExecProcess that it writes the entire output not to /dev/null , but to a specific file.

Total

Now you have in your hands a fairly simple and pleasant tool for managing the Gulp process on the server (even on a regular hosting) and you do not need to compile resources on a local machine while working through Deployment Tools.

All these developments can be beautifully wrapped in the Composer plugin and polished for a specific system (for example, Yii2). I will definitely do this when I transfer the CMS to it.

Coupled with the ability to edit resource files on the server through the admin panel, you get a powerful tool that does not require a customized working machine from you. You can urgently fix minor bugs on request from any place, from any computer , etc.

Possible problems and attempts to solve