Brincando com gulpjs

Então, eu literalmente terminei de brincar com gulp – abri uma nova aba no sublime e comecei a digitar este artigo. Eu tenho usado o Grunt por um tempo para executar tarefas principalmente para meus sites jekyll, mas quando eu comecei a gulp em um episódio do Shop Talk Show eu decidi dar uma olhada.

Antes de continuar, se você não sabe o que é um executor de tarefas, consulte ‘Por que usar um executor de tarefas?’ na página inicial do Gruntjs.

Gulp vs Grunt

A primeira coisa que notei foi o gulp é rápido, super rápido, possivelmente porque usa streams que o Grunt não usa (leia mais sobre isso no site do gulpjs). A sintaxe entre os dois também é ligeiramente diferente, o gulp é escrito como um aplicativo node js padrão que fará com que os desenvolvedores do node se sintam em casa, enquanto o Grunt é completamente diferente. Basicamente, você pode fazer mais com menos código no gulp. O Grunt, entretanto, tem muito mais plug-ins do que gulp, já que existe há muito mais tempo.

Na verdade, não examinei os detalhes, mas aparentemente o gulp não produz tantos arquivos tmp / log quanto o Grunt, mas não estou completamente certo de como essas coisas funcionam.

Começando

Gulp é executado em nodejs , se você ainda não o fez – faça o download e instale o node que é um arquivo executável simples para usuários de Mac e Windows. Não tenho certeza de como funciona em máquinas Linux.

Nota: Se você estiver em uma máquina Windows, ignore o comando ‘sudo’ e apenas abra a linha de comando como Administrador.

1. Abra sua linha de comando / terminal e digite

sudo npm install -g gulp

Isso deve instalar o gulp globalmente (-g) em sua máquina.

2.Você agora precisa ir para o diretório do seu projeto e digitar.

npm install --save-dev gulp

Isso tornará o gulp uma dependência dev em seu arquivo package.json .

Nota: Você pode instalar o gulp-util e também o gulp com este comando.

npm install --save-dev gulp gulp-util

Mas nunca precisei usar o gulp-util, então geralmente evito.

3.Agora crie um novo arquivo chamado gulpfile.js na raiz da pasta do seu projeto e cole-o nele.

var gulp = require('gulp');
var gutil = require('gulp-util');

gulp.task('default', function(){
    // place code for your default task here
});

4. É basicamente isso, se você quiser executar o gulp, basta digitar.

gulp

Se você quiser saber quais plug-ins estão disponíveis para o gulp – visite este site .

Aqui está um exemplo de um dos meus arquivos de gulp para ver algumas coisas que podem ser feitas.

var gulp = require('gulp'),
    gutil = require('gulp-util'),
    sass = require('gulp-sass'),
    notify = require('gulp-notify'),
    prefix = require('gulp-autoprefixer'),
    minifyCSS = require('gulp-minify-css'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify');

gulp.task('styles', function () {
    gulp.src('public/css/dev/*.scss')
        .pipe(sass())
        .pipe(prefix("last 1 version", "> 1%", "ie 8", "ie 7"))
        .pipe(minifyCSS())
        .pipe(gulp.dest('public/css'))
        .pipe(notify({ message: 'Styles task complete' }));
});

gulp.task('scripts', function () {
    gulp.src('public/js/dev/*.js')
        .pipe(concat("scripts.js"))
        .pipe(uglify())
        .pipe(gulp.dest('public/js'))
        .pipe(notify({ message: 'Scripts task complete' }));
});


gulp.task('watch', function () {
    gulp.watch('public/css/dev/*.scss', ['styles']);
    gulp.watch('public/js/dev/*.js', ['scripts']);
});


gulp.task('default', ['watch']);    

Não sou o tipo de escritor que explica o que cada linha de código faz, se você quiser esse tipo de coisa, leia este ótimo tutorial de Travis Manyard.

gulp.run () tornou-se obsoleto. Em vez disso, use dependências de tarefas ou o acionamento de tarefas gulp.watch.

Como observação lateral, vi muito esse aviso quando usei o gulp pela primeira vez e não consegui encontrar nenhum artigo sobre como me livrar dele, então pensei em escrever um pouco sobre como resolvi isso.

Segui um tutorial que me deu isso para assistir a arquivos sass.

gulp.task('default', function(){
    gulp.watch('./scss/*.scss', function(){
        gulp.run('sass');
    });
});

A função gulp.run () será removida na v4 do gulp, então o código acima deve ser reescrito como.

gulp.task('watch', function () {
    gulp.watch('./scss/*.scss', ['sass']);
});

gulp.task('default', ['watch']);

Este método remove a necessidade de gulp.run ().

Divirta-se executando a tarefa.