package.json

{
  "name": "joomla-gulp",
  "version": "1.1.3",
  "description": "A Gulp based build system for Joomla! extension developers",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git://github.com/phproberto/joomla-gulp.git"
  },
  "keywords": [
    "joomla",
    "gulp",
    "build"
  ],
  "author": {
    "name": "Roberto Segura"
  },
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/phproberto/joomla-gulp/issues"
  },
  "homepage": "https://github.com/phproberto/joomla-gulp",
  "devDependencies": {
    "browser-sync": "^1.3.2",
    "gulp": "^3.8.6",
    "gulp-zip": "^0.3.4",
    "require-dir": "^0.1.0"
  },
  "readme": "# Gulp build system for Joomla!\n\nDevelop faster\n\n## Index  \n\n1. [What is this?](#whats-this)\n2. [How does it work?](#how-works)\n3. [Install](#install)\n    1. [Clone this repo in your project](#clone)\n    2. [Install node.JS](#install-node)\n    3. [Install Gulp](#install-gulp)\n    4. [Initialise your project's package.json file](#initialise-package)\n    5. [Install joomla-gulp requirements](#install-joomla-gulp)\n    6. [Install your favorite Gulp plugins](#install-gulp-plugins)\n    7. [Create your joomla-gulp-extensions folder](#create-gulp-extensions)\n    8. [Create your config](#create-config)\n    9. [Create your gulpfile.js](#create-gulpfile)\n    10. [Start writing extensions](#start-writing-extensions)\n4. [Naming conventions](#naming-conventions)\n    1. [Main level](#main-level)\n    2. [Second level](#second-level)\n    3. [Third level](#third-level)\n    3. [Fourth level](#fourth-level)\n5. [License](#license)\n\n## <a name=\"whats-this\"></a>1. What is this?\n\nMost Joomla! extensions out there still use a [Phing](http://www.phing.info/) based build system that makes the job but without using the latest technologies. [Gulp](http://gulpjs.com/) is a modern [Node.JS](http://nodejs.org/) based build system incredibly fast and easy to understand because it uses javascript code.\n\n### <a name=\"plugins\"></a>Some of the cool plugins available for Gulp:\n\n* Compile LESS ([gulp-less](https://github.com/plus3network/gulp-less)) & Sass ([gulp-sass](https://www.npmjs.org/package/gulp-sass)) files on the fly\n* Minify CSS ([gulp-minify-css](https://www.npmjs.org/package/gulp-minify-css)), JS ([gulp-uglify](https://www.npmjs.org/package/gulp-uglify)) files on the fly\n* Concatenate files ([gulp-concat](https://www.npmjs.org/package/gulp-concat)) to mix various resources (i.e. CSS files) into one single file (and HTTP request)\n* Run [CodeSniffer](http://pear.php.net/package/PHP_CodeSniffer/redirected) validations ([gulp-phpcs](https://github.com/JustBlackBird/gulp-phpcs))\n* Run [JSHint](http://www.jshint.com/) validations ([gulp-jshint](https://www.npmjs.org/package/gulp-jshint))\n* Run [CoffeeScript](http://coffeescript.org/) validations ([gulp-coffee](https://www.npmjs.org/package/gulp-coffee))\n* Reload your browser automatically when you edit any file (including php, sass, less, js... ) ([browser-sync](http://www.browsersync.io/docs/gulp/)).\n* Minify the size of the images ([gulp-imagemin](https://www.npmjs.org/package/gulp-imagemin)) on the fly.\n\nThese are mainly the tools I use and the tools I think we should move forward but are you missing something? Suggest it!\n\n## <a name=\"how-works\"></a>2. How does it work?\n\nThis is a reusable base Gulp system for Joomla! extension development. Do not expect something magical here except that and task naming conventions. This repo is just a base system to allow you to add your extensions build scripts in a standard way so you can focus on the project specific stuff. \n\nThis base build system does not depend on any project structure because you specify it on your extension build scripts.\n\nThe main idea of this build system is that you always develop your extensions within your extensions main folder (your project's repository). The build system copies files to your test site and reloads your browser when anything that you want to watch changes. It's easy to adapt to any workflow (like symblink folders) but it's not the native way it works.\n\n## <a name=\"install\"></a>3. Install\n\n### <a name=\"clone\"></a>3.1. Clone this repo in your project\n\nIn your project's root:\n\n`git clone git@github.com:phproberto/joomla-gulp.git`\n\n### <a name=\"install-node\"></a>3.2. Install node.js\n\nI won't extend here. Visit http://nodejs.org/ or search google.\n\n### <a name=\"install-gulp\"></a>3.3. Install Gulp\nInstall Gulp globally so it's available in all your projects:  \n`sudo npm install -g gulp`  \n\nInstall Gulp on your project's folder:  \n`npm install --save-dev gulp`  \n\n### <a name=\"initialise-package\"></a>3.4. Initialise your project's package.json file\n\nOn your project's folder run:\n\n`npm init`\n\nThat will create a package.json file with the information that you provide.  \n\n### <a name=\"install-joomla-gulp\"></a>3.5. Install joomla-gulp requirements\n\nThis project only has 3 dependencies. You can install them from your project's root:\n\n`npm install browser-sync --save-dev`  \n`npm install gulp-zip --save-dev`  \n`npm install require-dir --save-dev`  \n\n### <a name=\"install-gulp-plugins\"></a>3.6. Install your favorite Gulp plugins\n\nI recommend you to look at this [readme's list of available extensions](#plugins). to start with. You can install any of them with:\n\n`npm install {EXTENSION} --save-dev`\n\nFor example to install the Sass compiler:\n\n`npm install gulp-sass --save-dev`\n\n### <a name=\"create-gulp-extensions\"></a>3.7. Create your joomla-gulp-extensions folder\n\nCopy the `joomla-gulp-extensions-sample` folder inside this repo into your project's root folder and rename it to `joomla-gulp-extensions`. That folder contains a sample  structure.  \n\nNote: You can rename folders to anything you want. For example I prefer to use `gulp` instead of `joomla-gulp` (I clone it directly to the `gulp` folder) and I use `gulp-extensions` install-noded of `joomla-gulp-extensions`. You only have to ensure that your `gulpfile.js` require dirs point to the right folders.\n\n### <a name=\"create-config\"></a>3.8. Create your config file\n\nCopy the file `gulp-config.json.sample` into your project's root folder and rename it to `gulp-config.json` and customise the params inside to fit your project requirements.\n\n#### Configuration options\n\n* **wwwDir**           : The local folder where your website is hosted  \n* **browserSyncProxy** : The host to use for browser-sync. You can create a virtualhost or directly use localhost.  \n* **extensions**       : Object containing the list of extensions available on your repository  \n\nSample extensions definition:\n\n```\n\t\"extensions\"       : {\n\t\t\"components\" : [\"content\"],\n\t\t\"libraries\"  : [\"joomla\"],\n\t\t\"media\"      : [\"joomla\"],\n\t\t\"modules\"    : {\n\t\t\t\"backend\"        : [\"quickicon\"]\n\t\t\t\"frontend\"       : [\"latest-articles\"]\n\t\t},\n\t\t\"plugins\"    : {\n\t\t\t\"authentication\" : [\"joomla\"],\n\t\t\t\"content\"        : [\"emailcloak\"],\n\t\t\t\"system\"         : [\"languagecode\"]\n\t\t},\n\t\t\"templates\"  : {\n\t\t\t\"frontend\"       : [\"tudomus\"]\n\t\t}\n\t}\n```\n## <a name=\"naming-conventions\"></a>4. Naming conventions\n\nThe system is build on a hierarchical task structure in mind. \n\n### <a name=\"main-level\"></a>4.1 Main level\n\nThere is the standard gulp call:\n\n`gulp` :  It will clean the test site, copy the new files, start watching for changes on any extension and launch browser sync to start seeing your changes in real time.  \n\n### <a name=\"second-level\"></a>4.2. Second level\n\nYou can also call the main tasks separately:  \n\n`gulp clean` : Will clean the test site  \n`gulp copy` : Will copy the repo content to the test site  \n`gulp watch` : Will watch for file changes on the repo folder and then acting accordingly  \n\n### <a name=\"third-level\"></a>4.3. Third level\n\nAnd of course you can call the task by extension type:  \n\n`gulp clean:components` : It will clean all the components  \n`gulp copy:plugins` : It will copy all the plugins  \n`gulp watch:templates` : It will start tracking changes on templates  \n\n### <a name=\"fourth-level\"></a>4.4. Fourth level\n\nFinally you can call tasks specifically from one extension. Examples:  \n\n`gulp copy:components.content` : Copy the content component to the test site  \n`gulp clean:plugins.authentication.joomla` : Clean the Joomla authentication plugin from the test site.  \n`gulp watch:media.joomla` : Start watching for changes on the joomla media folder  \n`gulp copy:modules.frontend.latest-articles` : Copy a frontend module to the test site.  \n`gulp watch:templates.frontend.protostar` : Watch changes on protostar frontend templat  \n\n## <a name=\"license\"></a>License\n\njoomla-gulp is released under the MIT license. See LICENSE for details.  \n",
  "readmeFilename": "README.md",
  "_id": "joomla-gulp@1.0.0",
  "dist": {
    "shasum": "cf6c232e583dde0069d0292300241ff57b413fe4"
  },
  "_from": "gulp"
}