Jump to content
fivestringsurf

Front End Scripts (dependency) Managers?

Recommended Posts

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

 

 

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 by fivestringsurf

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.