Coder Social home page Coder Social logo

kink03 / assetic Goto Github PK

View Code? Open in Web Editor NEW

This project forked from trk/assetic

0.0 2.0 0.0 228 KB

Assetic Module for Ionize CMS http://ionizecms.com . Module Help you to manage your assets, compile and minify javascript and stylesheet files.

License: MIT License

CSS 0.12% HTML 0.23% PHP 99.65%

assetic's Introduction

Assetic Module For Ionize CMS

Author : İskender TOTOĞLU

Version : 1.0

Ionize Version : 1.0.6 Didn't tested for older versions

Assetic Module for Ionize CMS http://ionizecms.com . Module Help you to manage your assets, compile and minify javascript and stylesheet files.

Rename downloaded file as Assetic !

! OUTPUT PATH need to be Writable !

IF ENVIRONMENT is production module will make all give files one file and will compile it.

IF ENVIRONMENT isn't production module will make all given files one file, won't compile it.

Example :

  • Your ENVIRONMENT is development, your output file will be development.given.output.name.ext
  • IF you turn ENVIRONMENT from development to production, your file will have given output filename : given.output.name.ext

USAGE

Base Tag

<ion:assetic>
	.......
</ion:assetic>

Manage CSS Files, Call EACH FILE

<ion:assetic>
	<ion:AssetManager>
	
		<!-- collection is your collection group name -->
		<!-- path is output path for compiled and minified asset file path, without separator for start and end -->
		<!-- filename is output filename with fileextention -->
		<ion:AssetCollection collection="SiteStyle" path="assets/css" filename="site.min.css">
			
			<!-- Call each file by writing filepath with filename and extention -->
			<ion:FileAsset src="assets/css/bootstrap.css" />
			<ion:FileAsset src="assets/css/fontawesome.css" />
			<ion:FileAsset src="assets/css/theme.css" />
			
			<!-- Use cssmin for compress compiled file -->
			<ion:Compressor method="cssmin" />
			
			<!-- Render Result -->
			<ion:Render />
			
			<!-- Call URL :: you can use "url" attribute for call just URL of File, without link tag -->
			<ion:AssetURL />
			
		<ion:AssetCollection>
		
	</ion:AssetManager>
</ion:assetic>

<!-- RESULT -->
<link rel="stylesheet" href="http://yoursite.ltd/themes/your-theme-path/assets/css/site.min.css?v=1398805852" />

Manage CSS Files, Call ALL FILES

<ion:assetic>
	<ion:AssetManager>
	
		<!-- collection is your collection group name -->
		<!-- path is output path for compiled and minified asset file path, without separator for start and end -->
		<!-- filename is output filename with fileextention -->
		<ion:AssetCollection collection="SiteStyle" path="assets/css" filename="site.min.css">
			
			<!-- Call All Files under given path and given extention -->
			<ion:FileAsset src="assets/css/build/*.css" />
			
			<!-- Use cssmin for compress compiled file -->
			<ion:Compressor method="cssmin" />
			
			<!-- Render Result -->
			<ion:Render />
			
			<!-- Call URL :: you can use "url" attribute for call just URL of File, without link tag -->
			<ion:AssetURL url="true" />
			
		<ion:AssetCollection>
		
	</ion:AssetManager>
</ion:assetic>

<!-- RESULT -->
http://yoursite.ltd/themes/your-theme-path/assets/css/site.min.css?v=1398805852

Manage JS Files, Call EACH FILE

<ion:assetic>
	<ion:AssetManager>
	
		<!-- collection is your collection group name -->
		<!-- path is output path for compiled and minified asset file path, without separator for start and end -->
		<!-- filename is output filename with fileextention -->
		<ion:AssetCollection collection="SiteJavascript" path="assets/js" filename="site.min.js">
			
			<!-- Call each file by writing filepath with filename and extention -->
			<ion:FileAsset src="assets/js/bootstrap.js" />
			<ion:FileAsset src="assets/js/application.js" />
			
			<!-- Use cssmin for compress compiled file -->
			<ion:Compressor method="jsmin" />
			
			<!-- Render Result -->
			<ion:Render />
			
			<!-- Call URL :: you can use "url" attribute for call just URL of File, without link tag -->
			<ion:AssetURL />
			
		<ion:AssetCollection>
		
	</ion:AssetManager>
</ion:assetic>

<!-- RESULT -->
<script type="text/javascript" src="http://yoursite.ltd/themes/your-theme-path/assets/js/site.min.js?v=1398805862"></script>

Manage JS Files, Call ALL FILES

<ion:assetic>
	<ion:AssetManager>
	
		<!-- collection is your collection group name -->
		<!-- path is output path for compiled and minified asset file path, without separator for start and end -->
		<!-- filename is output filename with fileextention -->
		<ion:AssetCollection collection="SiteJavascript" path="assets/js" filename="site.min.js">
			
			<!-- Call All Files under given path and given extention -->
			<ion:FileAsset src="assets/js/build/*.js" />
			
			<!-- Use cssmin for compress compiled file -->
			<ion:Compressor method="jsmin" />
			
			<!-- Render Result -->
			<ion:Render />
			
			<!-- Call URL :: you can use "url" attribute for call just URL of File, without link tag -->
			<ion:AssetURL url="true" />
			
		<ion:AssetCollection>
		
	</ion:AssetManager>
</ion:assetic>

<!-- RESULT -->
http://yoursite.ltd/themes/your-theme-path/assets/js/site.min.js?v=1398805862

Compressor Methods

Method Type File Requered ?
yui - Download Latest YUI Compressor, Rename downloaded jar file as yuicompressor.jar and copy yuicompressor.jar file to (modules/Assetic/libraries/Compressor/) folder.
google jar or api For type is api you don't need JAR file for compiling, its using http service. For Local Compile : Download Latest Closure Compiler, Rename downloaded jar file as compiler.jar and copy compiler.jar file to (modules/Assetic/libraries/Compressor/) folder.
cssmin - -
jsmin - -

NOTE :

  • You need JAVA on your server for use JAR files.
  • You can use YUI Compressor for JS and CSS file compiling.
  • You can use Closure Compiler only for JS file compiling.

assetic's People

Watchers

James Cloos avatar Laurent Brugière avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.