Jump to content


Photo

Front End Scripts (dependency) Managers?

js css minify manager dependency

Best Answer kicken, 11 November 2016 - 01:55 PM

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. Go to the full post


  • Please log in to reply
4 replies to this topic

#1 fivestringsurf

fivestringsurf
  • Members
  • PipPipPip
  • Advanced Member
  • 92 posts

Posted 10 November 2016 - 07:59 PM

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

 

 

 



#2 kicken

kicken
  • Gurus
  • Wiser? Not exactly.
  • 3,143 posts
  • LocationBonita, FL

Posted 10 November 2016 - 10:11 PM

I use Bower and Gulp. The tools are based on NodeJS rather than PHP but work well and are fairly easy to use.
Recycle your old CD's, don't trash them!
Did I help you out? Feeling generous? I accept tips via Bitcoin @ 14mDxaob8Jgdg52scDbvf3uaeR61tB2yC7

#3 fivestringsurf

fivestringsurf
  • Members
  • PipPipPip
  • Advanced Member
  • 92 posts

Posted 10 November 2016 - 11:08 PM

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, 10 November 2016 - 11:10 PM.


#4 kicken

kicken
  • Gurus
  • Wiser? Not exactly.
  • 3,143 posts
  • LocationBonita, FL

Posted 11 November 2016 - 01:55 PM   Best Answer

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.
Recycle your old CD's, don't trash them!
Did I help you out? Feeling generous? I accept tips via Bitcoin @ 14mDxaob8Jgdg52scDbvf3uaeR61tB2yC7

#5 fivestringsurf

fivestringsurf
  • Members
  • PipPipPip
  • Advanced Member
  • 92 posts

Posted 12 November 2016 - 06:17 PM

sweet thanks for your advice and sample code!






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users