Share
En el tutorial anterior, configuramos un proyecto y usamos Grunt para ver y compilar automáticamente Stylus y Jade. En este tutorial haremos lo mismo, pero usaremos un ejecutor de tareas diferente: Gulp.
Instale Gulp globalmente con:
[sudo] npm install gulp -g
Al igual que con el proceso Grunt, agregue un archivo "package.json" a su proyecto usando el npm init mando.
Instale Gulp en su proyecto y guárdelo como una dependencia de desarrollo con:
npm install gulp --save-dev
En paralelo al "Gruntfile" de Grunt, Gulp usa un "Gulpfile". A la carpeta raíz de su "Proyecto Gulp" agregue un archivo llamado "gulpfile.js".
Para comenzar, le daremos acceso al archivo al paquete "truculento" que acaba de instalar en su carpeta "node_modules", agregando esta línea en la parte superior de su Gulpfile:
Accentsconagua
var gulp = require ('gulp');Estrictamente hablando, Gulp no lo hace necesitar para usar los complementos de Gulp porque en realidad puede hacer uso de paquetes de vainilla npm. Sin embargo, hay varios complementos disponibles que están específicamente optimizados para su uso con Gulp, y cuando empieces, encontrarás estos más fáciles de usar..
Busque los complementos de Gulp en: http://gulpjs.com/plugins/
Estaremos instalando estos complementos:
Estos complementos realizan esencialmente los mismos roles que los que usamos con Grunt, con un par de diferencias.
Uno, no necesitamos instalar un plugin de "reloj", ya que Gulp tiene uno incorporado.
Dos, estamos instalando el plugin "gulp-concat" para reunir todos nuestros archivos (concatenarlos) antes de que minifiquemos todo el lote. Gracias a Dan por señalar esto!
Nota: estamos usando un complemento llamado "gulp-minify-css" pero emplea el mismo paquete "clean-css" que has usado hasta ahora.
Con su terminal apuntando a su carpeta "Proyecto Gulp" ejecute cada uno de estos comandos:
npm instala gulp-stylus --save-dev
npm install gulp-autoprefixer --save-dev
npm instala gulp-minify-css --save-dev
npm instalar gulp-jade --save-dev
npm instala gulp-uglify --save-dev
npm instalar gulp-concat --save-dev
Cuando haya terminado, debería ver estas carpetas dentro de la carpeta "node_modules" de su proyecto:
Más o menos… Al igual que hicimos con Grunt, necesitamos habilitar cada uno de los complementos, esta vez en nuestro Gulpfile. En lugar del método de Grunt grunt.loadNpmTasks, estaremos usando el exigir función nativa de NodeJS.
Agregue estas líneas a su Gulpfile, debajo de la línea que ya agregó.
var stylus = require ('gulp-stylus'); var autoprefixer = require ('gulp-autoprefixer'); var minifyCSS = require ('gulp-minify-css'); var jade = require ('gulp-jade'); var uglify = require ('gulp-uglify'); var rename = require ('gulp-rename'); var concat = require ('gulp-concat');Este enfoque es diferente al de Grunt en que aún no tenemos ningún comando registrado que pueda ejecutarse en esta etapa. Más bien, acabamos de crear variables de JavaScript, cada una representando nuestros complementos, que podemos emplear más adelante en nuestro Gulpfile.
Una de las principales diferencias entre Grunt y Gulp es que con Gulp no necesita configurar individualmente una tarea para cada complemento que esté utilizando en su proyecto. En su lugar, solo configura tareas para el real comandos quieres correr.
En nuestro Gruntfile anterior, configuramos una tarea separada para Stylus, Autoprefixer y clean-css. En nuestro Gulpfile no necesitamos hacer esto. Sabemos que cada vez que compilamos nuestro código de Stylus queremos que el CSS resultante se repare y reduzca automáticamente, así que en lugar de eso crearemos una sola tarea para hacer todas estas cosas a la vez.
Agregue este código al final de su Gulpfile:
gulp.task ('css', function () gulp.src ('source / stylus / main.styl') .pipe (stylus (compress: false, rutas: ['source / stylus'])) .pipe (autoprefixer ()) .pipe (minifyCSS ()) .pipe (rename ('style.css')) .pipe (gulp.dest ('build')));Vamos a desglosar lo que hemos hecho..
Primero estamos usando gulp.task () para definir una nueva tarea llamada css, y haciendo algo de espacio para una función de JavaScript que se ejecutará cada vez que ejecutemos el comando trago css:
gulp.task ('css', function () );A continuación, estamos usando gulp.src () para configurar el archivo fuente que queremos procesar en el archivo "source / stylus / main.styl":
gulp.task ('css', function () gulp.src ('source / stylus / main.styl'));Entonces, comenzamos a usar Gulp's. tubo() Función para llamar a cada uno de nuestros complementos. La maneratubo() el trabajo es como tuberías físicas, donde se introduce algo en la primera tubería y luego pasa a través de cada tubería conectada.
Nuestro primer "pipe" agrega la compilación de Stylus, usando el mismo comprimir y caminos opciones como lo hicimos cuando trabajamos con Grunt anteriormente:
gulp.task ('css', function () gulp.src ('source / stylus / main.styl') .pipe (stylus (compress: false, rutas: ['source / stylus']))) ;A continuación, conectamos un segundo conducto, que toma el código compilado y agrega una revisión automática:
gulp.task ('css', function () gulp.src ('source / stylus / main.styl') .pipe (stylus (compress: false, rutas: ['source / stylus'])) .pipe (autoprefixer ()));Conectamos una tercera tubería, tomando nuestro CSS prefijado y limpiándolo:
gulp.task ('css', function () gulp.src ('source / stylus / main.styl') .pipe (stylus (compress: false, rutas: ['source / stylus'])) .pipe (autoprefixer ()) .pipe (minifyCSS ()));En este punto, si tuviéramos que generar un archivo CSS, se llamaría "main.css" para que se corresponda con el archivo fuente "main.styl" con el que comenzamos. Entonces, conectaremos una cuarta tubería para cambiar el nombre del archivo con el que vamos a terminar a "style.css":
gulp.task ('css', function () gulp.src ('source / stylus / main.styl') .pipe (stylus (compress: false, rutas: ['source / stylus'])) .pipe (autoprefixer ()) .pipe (minifyCSS ()) .pipe (rename ('style.css')));Finalmente, conectamos nuestra quinta y última canalización para enviar nuestro archivo CSS terminado a su destino, usando gulp.dest () para configurar nuestra carpeta de salida para ser "construir".
gulp.task ('css', function () gulp.src ('source / stylus / main.styl') .pipe (stylus (compress: false, rutas: ['source / stylus'])) .pipe (autoprefixer ()) .pipe (minifyCSS ()) .pipe (rename ('style.css')) .pipe (gulp.dest ('build')));Ahora el css La tarea que acaba de crear está lista para comenzar. En la carpeta raíz de su proyecto ejecute:
trago css
... y su archivo Stylus se compilará, se reparará automáticamente y se limpiará y luego se enviará a su carpeta de "compilación" como "style.css".
Volveremos a utilizar el mismo proceso para configurar nuestra tarea para la compilación de Jade. Vamos a crear una tarea llamada html, configúrelo para usar todos los archivos ".jade" en la carpeta "source / jade" como su fuente, canalice a través de la compilación de Jade, luego envíe los archivos HTML resultantes a nuestra carpeta "build".
Agregue este código debajo de css tarea que acaba de crear:
gulp.task ('html', function () gulp.src ('source / jade / *. jade') .pipe (jade ()) .pipe (gulp.dest ('build')));Ejecuta tu nueva tarea con el comando:
trago html
... y verá cada uno de sus archivos de Jade compilados en los archivos HTML correspondientes en su carpeta de "compilación".
Ahora vamos a utilizar el mismo enfoque una vez más, configurando una tarea llamada js para tomar los archivos jQuery y Modernizr de nuestra carpeta "bower_components", verificarlos (concatenarlos y minimizarlos), luego enviar el código como un archivo llamado "output.min.js" a nuestra carpeta "build".
gulp.task ('js', function () gulp.src (['bower_components / jquery / dist / jquery.js', 'bower_components / modernizr / modernizr.js']) .pipe (concat ('output.min. js ')) // concat reúne todos nuestros archivos antes de minimizarlos .pipe (uglify ()) .pipe (gulp.dest (' build ')));Nota: en este caso, queremos especificar dos archivos de origen, por lo que estamos pasando los dos nombres de archivo como una matriz, es decir, valores separados por comas entre corchetes.
Corre tu js tarea con el comando
gulp js
... y verá un nuevo archivo llamado "output.min.js" en su carpeta de "compilación", que contiene jQuery y Modernizr en forma reducida.
Ahora que tenemos nuestra costumbre. css y html Configuración de tareas, podemos usar Gulp's en construido.gulp.watch () Funcionan para que se ejecuten automáticamente para nosotros.
Agregue este código al final de su Gulpfile para crear un reloj tarea:
gulp.task ('watch', function () gulp.watch ('source / stylus / *. styl', ['css']); gulp.watch ('source / jade / *. jade', ['html ']););El primer uso de gulp.watch () establece el css tarea que se ejecutará siempre que se cambie un archivo ".styl" dentro de la carpeta "source / stylus".
El segundo uso de gulp.watch () establece el html tarea que se ejecutará siempre que se cambie un archivo ".jade" dentro de la carpeta "origen / jade".
Corre tu reloj tarea con el comando
trago reloj
... y cada vez que guarde cambios en uno de sus archivos Stylus o Jade, su compilación se manejará automáticamente.
Al igual que hicimos con nuestro proyecto Grunt, terminaremos creando una tarea predeterminada que se ejecutará cada vez que usemos el comando trago por sí mismo.
Agregue esta línea al final de su Gulpfile:
gulp.task ('default', ['css', 'html', 'js']);Estamos usando esta tarea para compilar todo nuestro proyecto, incluido el JavaScript, haciendo que ejecute el css, html y js Tareas.
Para construir todo su proyecto con la tarea predeterminada, use el comando:
trago
A continuación, agregaremos el toque final a sus proyectos Grunt y Gulp que realmente los convertirán en máquinas de máxima eficiencia, y eso es la recarga en vivo y la sincronización del navegador..
Aprenderá cómo crear un comando que inicie su proyecto en una vista previa de localhost, es decir, simular un host web en su máquina local usando un http: // protocolo en lugar de unexpediente:// protocolo para previsualizar su sitio.
Y a medida que los archivos de origen del proyecto se observan en busca de cambios y se compilan automáticamente, su vista previa de localhost se volverá a cargar automáticamente, de modo que justo después de guardar los cambios los verá reflejados en el navegador..
Luego, también configuraremos la vista previa de localhost para que se sincronice cada navegador que lo vea, incluidos los navegadores en diferentes dispositivos en la misma conexión a Internet, como tabletas y teléfonos. Abra un menú en un navegador, vea cómo responde en todos los demás navegadores y dispositivos al mismo tiempo.
!
