Front End Scripts (dependency) Managers?

[fivestringsurf]

Over the past year I started using composer and have realized that using a dependency manager keeps development and code maintenance so much easier.  yay composer!

I can see an equally big need to do this for front side technologies (ie:  js & css)

 

What exists for us PHP developers to help maintain that huge mess of front end stuff we need to include.  Is there something to manage and minify JS/CSS that works well with the PHP environment?

 

Thanks

 

 

 

[kicken]

I use Bower and Gulp. The tools are based on NodeJS rather than PHP but work well and are fairly easy to use.

[fivestringsurf]

I spent the afternoon playing around with node.js tuts because node.js / NPM seems to be requirement for all these newfangled front-end managers... but I quickly learned that node.js IS it's own server language to be used instead of php.  That abruptly ended my "delving".  

@kicken - do you use these tools specifically with PHP.  (are you using bowerPHP ?)

Edited November 10, 2016 by fivestringsurf

[kicken]

The tools work essentially the same way composer does. You use them to install what you need via a few commands in a terminal. Once the libraries are installed you'd link them in your code like normal (script or link tags).

 

Install NodeJS to get the npm tool. Install Bower using the command npm install -g bower

 

Create a bower.json file in your project root such as:

{
  "name": "example",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "jquery": "^3.1.1"
  }
}

Then use bower to install your libraries via bower install. It'll stick all your libraries under bower_components directory which you can then link to, for example:

<script type="text/javascript" src="/bower_components/jquery/dist/jquery.min.js"></script>

Gulp is not necessary, but can be useful to combine/copy/minify the library files. I'll generally use it to combine the libraries into a single vendor.css / vendor.js file and copy them to my web root.

[fivestringsurf]

sweet thanks for your advice and sample code!