Instalar node.js
Primero, debe instalar Node.js. En términos generales, solo necesita descargar el paquete de instalación e instalarlo en el sitio web oficial de Node.js. Pero fallé vergonzosamente, y apareció el siguiente error:
Así que cambié a Brew Dafa:
Brew Instalar NodeJS
Instalar trago
Gulp se instala utilizando el comando npm de node.js:
Instalación de NPM -Global Gulp
Luego instálelo en el directorio del proyecto:
NPM Install-Save-Dev Gulp
Estoy bastante desconcertado sobre este paso. Con mis muchos años de experiencia como codificador, incluso si la instalación global está instalada, debería estar disponible dónde usarla. Pero Gulp obviamente no es así. Si no realiza este paso en el directorio del proyecto, se solicitará el siguiente error al usar el comando gulp:
... Gulp local no se encuentra en ...
… Intente ejecutar: NPM Install Gulp
Finalmente, ejecute el comando gulp en el directorio del proyecto. Si se emite el siguiente contenido, significa que la instalación está completa:
... no se encontró gulpfile
Ejemplo simple
A continuación se muestra el uso de GULP para construir un servidor de desarrollo de sitios web estático y admite la función de actualización en vivo (Livereload).
Primero, debe instalar el complemento del navegador para Livereload. La dirección de complemento es: http://livereload.com/extensions/, que admite tres navegadores principales: Chrome, Firefox y Safari. Después de instalar el complemento, aparecerá un botón en el navegador. Este botón tiene dos estados. Los puntos sólidos indican que el complemento está habilitado, y los puntos huecos indican que el complemento no está habilitado. ¡Recuerda recordar!
Luego cree una estructura de proyecto simple:
./gulpfile.js./public/./public/index.html
Use el siguiente comando para instalar Gulp y componentes relacionados:
NPM Install--Save-Dev Gulp Gulp-Connect
Gulp-Connect es un complemento GULP que proporciona funciones de servidor web estático e integra funciones de Livereload.
A continuación, debe editar el archivo gulpFile.js, el contenido es el siguiente:
var gulp = request ('gulp'), conection = request ('gulp-confonnect') gulp.task ('server', function () {conecte.server ({root: 'public', hivereLoad: true})}) gulp.task ('html', function () { gulp.src ('./ public/*. Html'). Pipe (conecte.reload ())}) gulp.task ('watch', function () {gulp.watch (['./ public/*. html'], ['html']])}) gulp.task ('predeterminado', ['watch', 'servidor])Finalmente ejecuta este servidor web:
trago
Abra el navegador y visite http: // localhost: 4000. Luego intente modificar el contenido del archivo index.html y guárdelo. En circunstancias normales, el lado del navegador debe actualizar automáticamente y mostrar el contenido modificado.
Comparación simple entre Gulp y Grunt
Veamos un ejemplo, construya Sass en Gulp y Grunt respectivamente:
Gruñido:
sass: {dist: {options: {style: 'expandened'}, archivos: {'dist/assets/css/main.css': 'src/styles/main.scss',}}}, Autoprefixer: {Dist: {Opciones: {navegadores: ['Last 2 Version', 'Safari 5', 'Ie 8', ',', ',', ',', 'Operación de {Último', 'Safari 5', 'Ie 8', ',', ',', ',', ',', ',', Último 9 '', ',', ',', ',', ',', ',', ',', ',', ',', ',', 'Ie 9', ',', ',', ',', ',', ',', ',', '. 12.1 ',' iOS 6 ',' Android 4 ']}, Src:' Dist/Assets/CSS/Main.css ', Dest:' Dist/Assets/CSS/Main.css '}}, Grunt.RegisterTask (' Styles ', [' sass ',' Autoprefixer ']);Grunt necesita configurar complementos por separado y especificar su ruta de origen y destino. Por ejemplo, tomamos un archivo como entrada para enchufar SASS y almacenamos los resultados de salida. Al configurar AutoPreFixer, debe usar la salida de SASS como entrada para generar un nuevo archivo. Echemos un vistazo a la misma configuración en Gulp:
Trago:
gulp.task ('sass', function () {return gulp.src ('src/styles/main.scss') .pipe (sass ({style: 'comprimido'})) .pipe (autoprefixer ('ult 2 versión', 'safari 5', 'iE 8', 'iE 9', 'opera 12.1' 4 ')) .Pipe (Gulp.Dest (' Dist/Assets/CSS '))});En Gulp solo necesitamos ingresar un archivo. Después del procesamiento SASS enchufable, luego se pasa al Autoprefixer de complemento y finalmente se obtiene un archivo. Este proceso acelera el proceso de construcción, eliminando la lectura y la escritura de archivos innecesarios, y solo requiere un archivo final.