un recurso en la red muy ilustrativo sobre la anatom\u00eda de dicho fichero<\/a>.<\/p>\nEn nuestro caso\u00a0tendr\u00edamos:<\/p>\n
{\r\n \"name\": \"gulp-basics\",\r\n \"version\": \"0.0.1\",\r\n \"description\": \"Ejemplo b\u00e1sico de entorno de desarrollo front-end con Gulp\",\r\n \"author\": \"Marcos Gonzalez <mgonzalezsancho@uoc.edu>\",\r\n \"devDependencies\": {\r\n \"browser-sync\": \"^2.11.1\",\r\n \"del\": \"^2.2.0\",\r\n \"gulp\": \"^3.9.1\",\r\n \"gulp-concat\": \"^2.6.0\",\r\n \"gulp-imagemin\": \"^2.4.0\",\r\n \"gulp-jshint\": \"^2.0.0\",\r\n \"gulp-sass\": \"^2.2.0\",\r\n \"gulp-sourcemaps\": \"^1.6.0\",\r\n \"gulp-uglify\": \"^1.5.3\",\r\n \"jshint\": \"^2.9.1\",\r\n \"jshint-stylish\": \"^2.1.0\"\r\n }\r\n}<\/pre>\nA partir del mismo se podr\u00edan i<\/span>nstalar todos los\u00a0plugins indicados como devDependencies en nuestro directorio de proyecto ejecutando la siguiente instrucci\u00f3n,\u00a0una vez nos encontramos dentro de\u00a0la carpeta ra\u00edz del proyecto, es decir al mismo nivel que el fichero package.json<\/span>:<\/span><\/p>\nnpm install<\/pre>\nEsta instrucci\u00f3n lanza un proceso secuencial que descarga todos los paquetes necesarios para contar con esos plugins en nuestro proyecto. Esta caracter\u00edstica es la que hace importante incluir este fichero en el repositorio, para que cualquier miembro del equipo o nosotros mismos descarg\u00e1ndonos el contenido del repositorio, estemos a un simple comando de obtener todos los paquetes necesarios.<\/p>\n
4) A\u00f1adir plugins posteriormente<\/span><\/h3>\nSi se quisiera a\u00f1adir alg\u00fan plugin adicional posteriormente y no se desea a\u00f1adirlo manualmente editando el fichero <\/span>package.json<\/span>, se pueden hacer la instalaci\u00f3n con el formato visto en el punto 3A.<\/span><\/p>\nnpm install nombre-paquete --save-dev<\/pre>\nLo que instalar\u00e1 dicho paquete en nuestro proyecto (bajo la carpeta <\/span>node_modules<\/span>) y adem\u00e1s a\u00f1adir\u00e1 ese plugin <\/span>a las dependencias fichero package.json (al incluir el –save-dev)<\/span><\/p>\n5) Creaci\u00f3n del fichero gulpfile.js<\/span><\/h3>\nEl otro fichero clave para montar este entorno de trabajo es el denominado gulpfile<\/span>.js,\u00a0<\/span>que ser\u00e1 el que especifique c\u00f3mo queremos usar esos plugins en nuestro proyecto, nos permita crear las diferentes tareas, combinarlas, etc. El contenido\u00a0del\u00a0fichero gulpfile empleado en este tutorial\u00a0es:<\/span><\/p>\nvar gulp = require('gulp'),\r\n del = require('del'),\r\n browserSync = require('browser-sync').create(),\r\n concat = require('gulp-concat'),\r\n imagemin = require('gulp-imagemin'),\r\n jshint = require('gulp-jshint'),\r\n stylish = require('jshint-stylish'),\r\n sass = require('gulp-sass'),\r\n sourcemaps = require('gulp-sourcemaps'),\r\n uglify = require('gulp-uglify');\r\n\r\n\r\n\/\/ Definici\u00f3n de direcotrios origen\r\nvar srcPaths = {\r\n images: 'src\/img\/',\r\n scripts: 'src\/js\/',\r\n styles: 'src\/sass\/',\r\n files: 'src\/'\r\n};\r\n\r\n\r\n\/\/ Definici\u00f3n de directorios destino\r\nvar distPaths = {\r\n images: 'dist\/img\/',\r\n scripts: 'dist\/js\/',\r\n styles: 'dist\/css\/',\r\n files: 'dist\/'\r\n};\r\n\r\n\r\n\/\/ Limpieza del directorio dist\r\ngulp.task('clean', function(cb) {\r\n del([ distPaths.files+'*.html', distPaths.images+'**\/*', distPaths.scripts+'*.js', distPaths.styles+'*.css'], cb);\r\n});\r\n\r\n\r\n\/\/ Copia de los cambios en los ficheros html en el directorio dist.\r\ngulp.task('html', function() {\r\n return gulp.src([srcPaths.files+'*.html'])\r\n .pipe(gulp.dest(distPaths.files))\r\n .pipe(browserSync.stream());\r\n});\r\n\r\n\r\n\/* \r\n* Procesamiento de im\u00e1genes para comprimir \/ optimizar las mismas.\r\n*\/ \r\ngulp.task('imagemin', function() {\r\n return gulp.src([srcPaths.images+'**\/*']) \r\n .pipe(imagemin({\r\n progressive: true,\r\n interlaced: true,\r\n svgoPlugins: [{removeUnknownsAndDefaults: false}, {cleanupIDs: false}]\r\n }))\r\n .pipe(gulp.dest(distPaths.images))\r\n .pipe(browserSync.stream());\r\n});\r\n\r\n\r\n\/* \r\n* Procesamiento de ficheros SCSS para la generaci\u00f3n de los ficheros\r\n* CSS correspondientes. Los sourcemaps en este caso se generan dentro \r\n* del propio fichero.\r\n*\/ \r\ngulp.task('css', function() {\r\n return gulp.src([srcPaths.styles+'**\/*.scss'])\r\n .pipe(sourcemaps.init())\r\n .pipe(sass())\r\n .pipe(sourcemaps.write())\r\n .pipe(gulp.dest(distPaths.styles))\r\n .pipe(browserSync.stream());\r\n});\r\n\r\n\r\n\/* \r\n* Procesamiento de ficheros JS mediante JSHint para detecci\u00f3n de errores.\r\n* Este proceso es previo al tratamiento de los ficheros JS para la \r\n* obtenci\u00f3n del fichero concatenado y minificado.\r\n*\/ \r\ngulp.task('lint', function() {\r\n return gulp.src([srcPaths.scripts+'**\/*.js'])\r\n .pipe(jshint())\r\n .pipe(jshint.reporter(stylish));\r\n});\r\n\r\n\r\n\/* \r\n* Procesamiento de ficheros JS para la generaci\u00f3n de un fichero \r\n* final \u00fanico y minificado. Los sourcemaps se generan en una \r\n* carpeta independiente en vez de en el propio fichero.\r\n*\/ \r\ngulp.task('js', ['lint'], function() {\r\n return gulp.src([srcPaths.scripts+'main.js', srcPaths.scripts+'extra.js']) \r\n .pipe(sourcemaps.init())\r\n .pipe(concat('all.min.js')) \r\n .pipe(uglify())\r\n .pipe(sourcemaps.write('maps'))\r\n .pipe(gulp.dest(distPaths.scripts))\r\n .pipe(browserSync.stream());\r\n});\r\n\r\n\r\n\/*\r\n* Tarea para lanzar el proceso de servidor mediante BrowserSync.\r\n* Antes de comenzar la propia tarea ejecuta las tareas de las que tiene\r\n* dependencia: html, imagemin, css y js necesarias para disponer\r\n* del proyecto en dist, ya que cada vez que se lanza gulp, se hace una\r\n* limpieza de dicho directorio.\r\n*\r\n* En este caso se trabaja con un servidor local mediante un proxy\r\n* y se define la ruta de partida, as\u00ed como los navegadores a lanzar\r\n* en caso de estar disponibles en el equipo.\r\n*\r\n* Adicionalmente se crean los watchers para procesar los cambios que se\r\n* puedan producir en los archivos sensibles para el proyecto.\r\n*\/\r\ngulp.task('serve', ['html', 'imagemin', 'css', 'js'], function() {\r\n browserSync.init({\r\n logLevel: \"info\",\r\n browser: [\"google chrome\", \"Firefox\"],\r\n proxy: \"localhost:80\",\r\n startPath: \"\/gulp-basics\/dist\/\"\r\n });\r\n\r\n gulp.watch(srcPaths.files+'*.html', ['html']);\r\n gulp.watch(srcPaths.images+'**\/*', ['imagemin']); \r\n gulp.watch(srcPaths.styles+'**\/*.scss', ['css']);\r\n gulp.watch(srcPaths.scripts+'**\/*.js', ['js']);\r\n});\r\n\r\n\/* \r\n* Definci\u00f3n de la tarea por defecto que en este caso limpia el directorio destino\r\n* y lanza la tarea de servidor.\r\n*\/\r\ngulp.task('default', ['clean', 'serve'], function() {});<\/pre>\n <\/p>\n
Se puede apreciar en este fichero una de las mayores diferencias con respectoa Grunt, que es que en vez de tener que realizar importantes esfuerzos configurando cada plugin, en este caso se configuran tareas de una forma mucho m\u00e1s intuitiva mediante el encadenamiento de acciones sobre los ficheros procesados. <\/span><\/p>\nCon Gulp podemos crear tantas tareas como queramos y combinarlas de forma compleja, incluso aplicando l\u00f3gica mediante JavaScript.<\/span><\/p>\n
![\"gulp-build-system\"](\"http:\/\/multimedia.uoc.edu\/blogs\/frontend\/files\/2016\/03\/gulp-build-system.png\")
<\/p>\n![\"Estructura](\"http:\/\/multimedia.uoc.edu\/blogs\/frontend\/files\/2016\/03\/Captura-de-pantalla-2016-03-12-a-las-11.11.50.png\")
<\/p>\n![\"Estructura](\"http:\/\/multimedia.uoc.edu\/blogs\/frontend\/files\/2016\/03\/Captura-de-pantalla-2016-03-12-a-las-11.11.07.png\")
<\/p>\n