NPM Instalar Gulp--Save-Dev
¿Qué es Gulp?
Gulp es una nueva generación de herramientas de construcción de proyectos front-end. Puede usar Gulp y sus complementos para compilar su código de proyecto (menos, SASS), y también puede comprimir su código JS y CSS, e incluso comprimir sus imágenes. Gulp solo tiene una pequeña cantidad de API, por lo que es muy fácil de aprender. Gulp usa la transmisión para procesar contenido. Node ha generado una serie de herramientas de automatización, como Bower, Yeoman, Grunt, etc.
Similitudes y diferencias entre Gulp y Grunt
Fácil de usar: utilizando el código sobre las estrategias de configuración, Gulp mantiene las tareas simples y complejas manejables.
Eficiente: al aprovechar el poderoso flujo de Node.js, puede completar la construcción más rápido sin escribir archivos intermedios en el disco.
Alta calidad: las directrices de complemento estrictas de Gulp para garantizar que los complementos sean simples y funcionen de la manera que espere.
Fácil de aprender: al minimizar las API, puede aprender Gulp en muy poco tiempo. El trabajo de compilación es como lo imaginas: es una serie de tuberías de flujo.
Debido a que Gulp está escrito en Node.js, debe instalar NPM en su terminal. NPM es el Administrador de paquetes Node.js, así que primero instale Node.js en su máquina.
Comando de instalación de Gulp
Sudo NPM Install -G Gulp
Cree un nuevo archivo paquete.json en el directorio raíz
NPM Init.
Instale el paquete Gulp
Después de la instalación, ingrese Gulp -V nuevamente para ver el número de versión, como se muestra en la siguiente figura, tiene éxito:
Instalar complementos
Instale complementos de uso común:
Compilación de SASS (Gulp-Ruby-Sass)
Agregar automáticamente el prefijo CSS (Gulp-Autoprefixer)
CSS comprimido (Gulp-Minify-CSS)
Verificación del código JS (Gulp-Jshint)
Fusionar archivos JS (Gulp-Concat)
Código JS comprimido (Gulp -uglify)
Imagen comprimida (Gulp-Imagemin)
Actualice automáticamente la página (Gulp-Livereload)
Cache de imagen, solo si se reemplaza la imagen (Gulp-Cache)
Cambiar recordatorio (Gulp-Notify)
Borrar el archivo (del)
Para instalar estos complementos, debe ejecutar el siguiente comando:
La copia del código es la siguiente:
$ npm instalar gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-confat gulp -uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del-save-dev
-save y -save -dev pueden guardarle los pasos para modificar manualmente el archivo paquete.json.
NPM Instalar módulo -name -save
Agregue automáticamente los números de módulo y versión a la sección de dependencias
NPM Instalar módulo-name -save-dev
Agregue automáticamente los números de módulo y versión a la sección DevDependences
comando de trago
Solo necesitas saber 5 comandos Gulp
gulp.task (nombre [, deps], fn) Defina el nombre de la tarea: Nombre de la tarea Deps: Dependencia Nombre de la tarea FN: Función de devolución de llamada
gulp.run (tareas ...): ejecute múltiples tareas en paralelo tantos como sea posible
gulp.watch (glob, fn): cuando cambia el contenido del globo, ejecute FN
gulp.src (global): configure la ruta al archivo que se procesará, que puede ser múltiples archivos en forma de una matriz, o puede ser regular
gulp.dest (ruta [, opciones]): establecer la ruta para generar el archivo
Glob: puede ser una ruta de archivo directo. Su significado es la coincidencia de patrones.
Los archivos se procesarán mediante Gulp Guides Releating Plugins a través de la API de tubería (tubería ()). Ejecutar tareas de procesamiento de archivos a través de complementos.
gulp.task ('default', function () {...});La API Gulp.Task se usa para crear tareas. Puede ingresar $ Gulp [predeterminado] en la línea de comando (opcional para soportes) para realizar las tareas anteriores.
Documentación oficial de API oficial de Gulp: https://github.com/gulpjs/gulp/blob/master/docs/api.md
Colección de complementos Gulp: http://gulpjs.com/plugins/
Empiece a construir el proyecto
Cree un nuevo archivo gulpfile.js en el directorio raíz del proyecto y pegue el siguiente código:
// Introducir los complementos Gulp y Uglify en el directorio root del proyecto var gulp = request ('gulp'); var Uglify = require ('gulp -uglify'); gulp.task ('compress', function () {return gulp.src ('script/*. Js') .pipe (uglify ()) .pipe (gulp.dest ('Dist');});Nota: El nombre del archivo gulpFile.js no se puede cambiar.
El proyecto debe usar Uglify y cambiar el nombre de complementos, y ejecutar el siguiente comando para instalar:
NPM Install--Save-Dev Gulp-UglifyNPM Install--Save-Dev Gulp-Rename
Tome mi ejemplo, ingrese el directorio donde se encuentra gulpfile.js:
CD/Usuarios/TRIGKIT4/GULP-TEST
Luego ingrese:
var gulp = request ('gulp'); var Uglify = request ('gulp -uglify'); var rename = request ('gulp-rrename'); gulp.task ('compress', function () {return gulp.src ('script/*. js') .pipe (ulglify ()) .pipe (rename ('jQuery.ui.min.)) .pipe (gulp.dest ('dist'));});Este comando instalará todas las dependencias en paquete.json, como se muestra en la siguiente figura:
GulpFile.js completo
// Cargue el complemento var gulp = request ('gulp'), sass = request ('gulp-ruby-sass'), autoprefixer = require ('gulp-auToprefixer'), minifycss = require ('gulp-minify-css'), jshint = require ('gulp-jshint'), uglify = require ('' Gulife-css '), jshint'). = require ('gulp-imagemin'), rename = request ('gulp-rename'), limpie = require ('gulp-clipe'), concat = require ('gulp-concat'), notify = require ('gulp-notify'), cache = requerir ('gulp-cache'), livereload = require ('gulp-livereload'); // style gulp.task ('styles', function () {return gulp.src ('src/styles/main.scss') .pipe (sass ({style: 'expandido',})) .pipe (autoprefixer ('Última versión 2 versión', 'safari 5', 'ie 8', 'ie 9', ',' 12.1 ', ioh' ', iots, i, mio, mio, iE, ie 8', 'ie 9', ',', ioha 12. 'Android 4'))) .Pipe (gulp.dest ('dist/styles')) .pipe (rename ({sufix: '.min'})) .pipe (minifycss ()) .pipe (gulp.dest ('dist/styles') .pipe (notificar ({mensaje: 'Styles Task completo'}));}); // script gulp.task ('scripts', function () {return gulp.src ('src/scripts/**/*. Js') .pipe (jshint ('. Js') .pipe (jshint ('. Js')) .pipe (jshintrc ')) .pipe (jshintrc')) .pipe (jshintr ('). .pipe (concat ('main.js')) .pipe (gulp.dest ('dist/scripts')) .pipe (rename ({sufix: '.min'})) .pipe (uglify ()) .pipe (gulp.dest ('dist/scripts')) .pipe (notify ({message: 'scripts tasks completo'});});});}); // Image gulp.task ('imágenes', function () {return gulp.src ('src/images/**/*') .pipe (cache (imageMin ({optimizationLevel: 3, progresivo: true, interlaced: true})))) .pipe (gulp.dest ('Dist/imágenes')) .pipe (notify (note ({Message: 'Task:' Task: ' }));}); // Limpiar gulp.task ('clean', function () {return gulp.src (['dist/styles', 'dist/scripts', 'dist/images'], {read: false}) .pipe (clean ());}); // tarea preestablecida gulp.task ('default', ['limpia'], function () {gulp.start ('estilos', 'scripts', 'imágenes');}); // Guard gulp.task('watch', function() { // Guard all .scss files gulp.watch('src/styles/**/*.scss', ['styles']); // Guard all .js files gulp.watch('src/scripts/**/*.js', ['scripts']); // Guard all .js files gulp.watch ('src/scripts/**/*. js', ['scripts']); gulp.watch (['dist/**']). on ('cambio', function (archivo) {server.changed (file.path);}); });Nota: Pipe () es un método para pasar flujos de datos en el módulo de flujo. El primer parámetro es el método de complemento. El complemento recibirá archivos que fluyen desde el proceso aguas arriba, el proceso y luego fluirá hacia abajo.
gulp.task ('name de tareas', function () {return gulp.src ('archivo ruta') .pipe (...) .pipe (...) // hasta el último paso de la tarea.pipe (...);});complemento de trago
Gulp-Gh- Pages: use Gulp para generar documentos HTML por Markdown y cargarlos en las páginas Git
https://github.com/shinnn/gulp-gh-pages
var gulp = require ('gulp'); var ghpages = require ('gulp-gh-pages'); gulp.task ('implement', function () {return gulp.src ('./ dist/**/*') .pipe (ghpages ());});complemento gulp-jade: compile jade en el archivo html
complemento sin Gulp: compilar menos en el archivo CSS
var menos = requirir ('gulp-sin'); var ruta = requirir ('ruta'); gulp.task('less', function () { return gulp.src('./less/**/*.less') .pipe(less({ paths: [ path.join(__dirname, 'less', 'includes') ] })) .pipe(gulp.dest('./public/css'));});gulp-live-server plug-in: convenient, lightweight server var gulp = require ('gulp'); var gls = request ('gulp-live-server'); gulp.task('serve', function() { //1. serve with default settings var server = gls.static(); //equals to gls.static('public', 3000); server.start(); //2. serve at custom port var server = gls.static('dist', 8888); server.start(); //3. serve multifolders var server = gls.static(['dist', '.TMP']);Gulp-Livereload puede guardar y actualizar en tiempo real, por lo que no es necesario presionar F5 y cambiar la interfaz
Gulp-Load-Plugins: cargue automáticamente el complemento Gulp arbitrary en su archivo paquete. Json
Instalación de $ npm--Save-Dev Gulp-Load-Plugins
Por ejemplo, un archivo dado paquete.json es el siguiente:
{"Dependencias": {"Gulp-Jshint": "*", "Gulp-Concat": "*"}}Agregue el siguiente código en gulpfile.js:
var gulp = request ('gulp'); var gulPloadPlugins = request ('gulp-load-plugins'); var plugins = gulPloadPlugins (); plugins.jshint = require ('gulp-jshint'); plugins.concat = require ('gulp-confat');Gulp-Babel: el complemento Babel de Gulp,
Instalación de $ NPM--Save-Dev Gulp-Babel Babel-Preset-ES2015
Cómo usar:
const gulp = request ('gulp'); const babel = require ('gulp-babel'); gulp.task ('default', () => {return gulp.src ('src/app.js') .pipe (babel ({preets: ['Es2015']}) .pipe (Gulp.estest ('Dist');});Github oficial: https://github.com/gulpjs/gulp