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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

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.