Grunt

Instal·lació

Preparem el nostre entorn:

https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions

curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash -
sudo apt-get install -y nodejs

o bé si es Debian:

sudo apt-get install nodejs-legacy

sudo npm install -g grunt
sudo npm install -g grunt-init
sudo npm install -g grunt-cli

Package JSON

Creem en nostre fitxer package.json

{
  "name": "NomApp",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-jshint": "~0.10.0",
    "grunt-contrib-concat": "~0.4.0",
    "grunt-contrib-uglify": "~0.5.0",
    "grunt-shell": "~0.7.0"
  }
}

Instal·lar les dependencies

Per instal·lar les dependencies o iniciar el projecte, executarem:

sudo npm install --save-dev

Si afegim una nova dependencia a posterior, podem executar:

npm install grunt-contrib-jshint --save-dev
npm install grunt-contrib-concat --save-dev
npm install grunt-contrib-uglify --save-dev
npm install grunt-contrib-cssmin --save-dev

Ens crearà el directori "node_modules" amb totes les dependencies

Gruntfile.js

module.exports = function(grunt) {
    grunt.initConfig({
        jshint: {
            all:['js/app.js']
        },
        concat: {
            dist: {
                src: ['js/app.js', 'js/prova.js'],
                dest: 'js/all.js'
            }
        },
        uglify: {
            dist: {
                src: ['js/all.js'],
                dest: 'js/all.min.js'
            }
        },
        shell: {
            multiple: {
                command: [
                    'rm js/all.js',
                ].join('&&')
            }
        },
    });

    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-shell');

    grunt.registerTask('default', ['jshint', 'concat', 'uglify', 'shell']);
};

Executarem a la terminal la comanda "grunt" perque realitzi les tasques que hem anotat a "Gruntfile.js"

Bower

Bower es permet descarregar les nostres dependencies (front-end package management). Per instal·lar:

Instal·lació

sudo npm install bower -g

Package JSON

{
  "name": "angular-myApp",
  "version": "1.0.0",
  "authors": [
    "ZZ <zikzak@zikzakmedia.com>"
  ],
  "description": "AngularJS myApp",
  "keywords": [
    "angular",
    "Tryton"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "angular": "~1.2.0",
    "angular-route": "~1.2.16",
    "angular-bootstrap": "~0.11.0",
    "ngstorage": "~0.3.0"
  },
  "devDependencies": {}
}

Instal·lar les dependencies

Per descarregar les dependencies, executarem:

bower install angular-ui

Ens crearà el directori "bower_components" amb les dependencies. Ara només al html podem apuntar directament aquest directori:

<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>

Grunt (last edited 2016-01-07 14:53:19 by resteve)

Contenidos creados por el equipo de Zikzakmedia. Creative Commons By-NC-SA

PythonZikzakmedia