-
-
Notifications
You must be signed in to change notification settings - Fork 5.2k
Reviewed the Assetic cookbook articles #5094
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -16,43 +16,49 @@ talked about briefly. | |
Install UglifyJS | ||
---------------- | ||
|
||
UglifyJS is available as an `Node.js`_ npm module and can be installed using | ||
npm. First, you need to `install Node.js`_. Afterwards you can install UglifyJS | ||
using npm: | ||
UglifyJS is available as a `Node.js`_ module. First, you need to `install Node.js`_ | ||
and then, decide the installation method: global or local. | ||
|
||
Global Installation | ||
~~~~~~~~~~~~~~~~~~~ | ||
|
||
The global installation method makes all your projects use the very same UglifyJS | ||
version, which simplifies its maintenance. Open your command console and execute | ||
the following command (you may need to run it as a root user): | ||
|
||
.. code-block:: bash | ||
|
||
$ npm install -g uglify-js | ||
|
||
This command will install UglifyJS globally and you may need to run it as | ||
a root user. | ||
Now you can execute the global ``uglifyjs`` command anywhere on your system: | ||
|
||
.. note:: | ||
.. code-block:: bash | ||
|
||
It's also possible to install UglifyJS inside your project only. To do | ||
this, install it without the ``-g`` option and specify the path where | ||
to put the module: | ||
$ uglifyjs --help | ||
|
||
.. code-block:: bash | ||
Local Installation | ||
~~~~~~~~~~~~~~~~~~ | ||
|
||
$ cd /path/to/symfony | ||
$ mkdir app/Resources/node_modules | ||
$ npm install uglify-js --prefix app/Resources | ||
It's also possible to install UglifyJS inside your project only, which is useful | ||
when your project requires an specific UglifyJS version. To do this, install it | ||
without the ``-g`` option and specify the path where to put the module: | ||
|
||
It is recommended that you install UglifyJS in your ``app/Resources`` folder | ||
and add the ``node_modules`` folder to version control. Alternatively, | ||
you can create an npm `package.json`_ file and specify your dependencies | ||
there. | ||
.. code-block:: bash | ||
|
||
Depending on your installation method, you should either be able to execute | ||
the ``uglifyjs`` executable globally, or execute the physical file that lives | ||
in the ``node_modules`` directory: | ||
$ cd /path/to/your/symfony/project | ||
$ mkdir app/Resources/node_modules | ||
$ npm install uglify-js --prefix app/Resources | ||
|
||
.. code-block:: bash | ||
It is recommended that you install UglifyJS in your ``app/Resources`` folder and | ||
add the ``node_modules`` folder to version control. Alternatively, you can create | ||
an npm `package.json`_ file and specify your dependencies there. | ||
|
||
$ uglifyjs --help | ||
Now you can execute the ``uglifyjs`` command that lives in the ``node_modules`` | ||
directory: | ||
|
||
$ ./app/Resources/node_modules/.bin/uglifyjs --help | ||
.. code-block:: bash | ||
|
||
$ "./app/Resources/node_modules/.bin/uglifyjs" --help | ||
|
||
Configure the ``uglifyjs2`` Filter | ||
---------------------------------- | ||
|
@@ -96,8 +102,7 @@ your JavaScripts: | |
.. note:: | ||
|
||
The path where UglifyJS is installed may vary depending on your system. | ||
To find out where npm stores the ``bin`` folder, you can use the following | ||
command: | ||
To find out where npm stores the ``bin`` folder, execute the following command: | ||
|
||
.. code-block:: bash | ||
|
||
|
@@ -154,8 +159,8 @@ can configure its location using the ``node`` key: | |
Minify your Assets | ||
------------------ | ||
|
||
In order to use UglifyJS on your assets, you need to apply it to them. Since | ||
your assets are a part of the view layer, this work is done in your templates: | ||
In order to apply UglifyJS on your assets, add the ``filter`` option in the | ||
asset tags of your templates to tell Assetic to use the ``uglifyjs2`` filter: | ||
|
||
.. configuration-block:: | ||
|
||
|
@@ -178,8 +183,7 @@ your assets are a part of the view layer, this work is done in your templates: | |
|
||
The above example assumes that you have a bundle called AppBundle and your | ||
JavaScript files are in the ``Resources/public/js`` directory under your | ||
bundle. This isn't important however - you can include your JavaScript | ||
files no matter where they are. | ||
bundle. However you can include your JavaScript files no matter where they are. | ||
|
||
With the addition of the ``uglifyjs2`` filter to the asset tags above, you | ||
should now see minified JavaScripts coming over the wire much faster. | ||
|
@@ -216,12 +220,9 @@ and :ref:`dump your assetic assets <cookbook-assetic-dump-prod>`. | |
|
||
.. tip:: | ||
|
||
Instead of adding the filter to the asset tags, you can also globally | ||
enable it by adding the ``apply_to`` attribute to the filter configuration, for | ||
example in the ``uglifyjs2`` filter ``apply_to: "\.js$"``. To only have | ||
the filter applied in production, add this to the ``config_prod`` file | ||
rather than the common config file. For details on applying filters by | ||
file extension, see :ref:`cookbook-assetic-apply-to`. | ||
Instead of adding the filters to the asset tags, you can also configure which | ||
filters to apply for each file in your application configuration file. | ||
See :ref:`cookbook-assetic-apply-to` for more details. | ||
|
||
Install, Configure and Use UglifyCSS | ||
------------------------------------ | ||
|
@@ -231,8 +232,14 @@ the node package is installed: | |
|
||
.. code-block:: bash | ||
|
||
# global installation | ||
$ npm install -g uglifycss | ||
|
||
# local installation | ||
$ cd /path/to/your/symfony/project | ||
$ mkdir app/Resources/node_modules | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Is this step needed? Doesn't There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. it does |
||
$ npm install uglifycss --prefix app/Resources | ||
|
||
Next, add the configuration for this filter: | ||
|
||
.. configuration-block:: | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -4,19 +4,15 @@ | |
How to Minify JavaScripts and Stylesheets with YUI Compressor | ||
============================================================= | ||
|
||
Yahoo! provides an excellent utility for minifying JavaScripts and stylesheets | ||
so they travel over the wire faster, the `YUI Compressor`_. Thanks to Assetic, | ||
you can take advantage of this tool very easily. | ||
|
||
.. caution:: | ||
|
||
The YUI Compressor is `no longer maintained by Yahoo`_ but by an independent | ||
volunteer. Moreover, Yahoo has decided to `stop all new development on YUI`_ | ||
and to move to other modern alternatives such as Node.js. | ||
The YUI Compressor is `no longer maintained by Yahoo`_. That's why you are | ||
**strongly advised to avoid using YUI utilities** unless strictly necessary. | ||
Read :doc:`/cookbook/assetic/uglifyjs` for a modern and up-to-date alternative. | ||
|
||
That's why you are **strongly advised** to avoid using YUI utilities unless | ||
strictly necessary. Read :doc:`/cookbook/assetic/uglifyjs` for a modern and | ||
up-to-date alternative. | ||
Yahoo! provides an excellent utility for minifying JavaScripts and stylesheets | ||
so they travel over the wire faster, the `YUI Compressor`_. Thanks to Assetic, | ||
you can take advantage of this tool very easily. | ||
|
||
Download the YUI Compressor JAR | ||
------------------------------- | ||
|
@@ -170,4 +166,3 @@ apply this filter when debug mode is off. | |
.. _`YUI Compressor`: http://developer.yahoo.com/yui/compressor/ | ||
.. _`Download the JAR`: https://github.com/yui/yuicompressor/releases | ||
.. _`no longer maintained by Yahoo`: http://www.yuiblog.com/blog/2013/01/24/yui-compressor-has-a-new-owner/ | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Should we change this to the other URL (that was removed)? |
||
.. _`stop all new development on YUI`: http://yahooeng.tumblr.com/post/96098168666/important-announcement-regarding-yui |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not sure about this change. While I agree that "frontend" looks most beautiful, it seems that "front-end" actually would be more correct (see also #4671 (comment)).
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
both Bower and Bootstrap (on their homepages) use
front-end
. That looks a bit odd to me, but I guess we should follow their lead.