Gulp, с чем его едят?

[li4e]

Добрый день. Прошу помочь разобраться с этим зверем.
Js знаю на уровне написания скриптов на jquery. 

Что пока есть. 
Установил Node, gulp.
В папке с проектом создал папку dev, в которой храню less,js исходники bootstrap. (Bootstrap просто взял чтобы поучиться настраивать gulp)

Задача состоит вот в чем. Хочу чтобы less файлы объединялись в один, затем конвертировались в css, прогонялись через autoprefixer минимизировался и сохранялся в папке /css/min.css
Так же и js, но с этим думаю справлюсь как пойму принцип.
Так же вопрос насчет плагинов, нужно их самому ставить если стоит npm?

Допустим вот исходный файл gulpfile.js

 

var gulp = require('gulp');gulp.task('css', function() {  return gulp.src('dev/less/*.less')  	.pipe(less()) ///не знаю дальше что делать});

Покажите пожалуйста на примере этого файла как подключить плагины(например autoprefixer,minimify,less) и как выполнить то что выделено серым?

Ну и как собственно выполнить потом это все дело

Заранее благодарю, надеюсь на вашу помощь. Хочу одолеть зверя. 

Edited November 25, 2014 by li4e

[npofopr]

Дак ведь уже много переведенных статей по gulp.

Да и на самом гитхабе gulp-autoprefixer вроде есть примеры.

 

stylus я так собираю:

gulp.task('stylus:build', function() {    gulp.src(paths.stylesheets_build.src)    .pipe(plumber())    .pipe(stylus({set:['linenos']}))    .pipe(autoprefixer("last 4 version", "> 1%", "ie 8", "ie 7"))    .pipe(gulp.dest(paths.stylesheets_build.dest))    .pipe(rename("style.min.css"))    .pipe(csso())    .pipe(gulp.dest(paths.stylesheets_build.dest));});

С less тоже самое.

Когда сам осваивал, сделал для себя, с нужным функционалом конфиг https://github.com/npofopr/my-gulpfile

Там правда обновлять его надо. Не факт, что после обновления всё заработает.

[Bassline]

Не могу решить одну проблему.

 

Есть такой конфиг:

gulp.task('less', function(){    gulp.src('src/less/*.less')        .pipe(sourcemaps.init())        .pipe(less())        .pipe(autoprefixer())        .pipe(uglifycss())        .pipe(sourcemaps.write('maps'))        .pipe(gulp.dest('dist/css'));});

На выходе получается минифицированный css файл с префиксами и ссылкой на карту.

 

Как сделать так, что бы на выходе создавалось два файла css, один сжатый, другой нет, и оба с ссылкой на карту? На grunt с этим проблемы нет, я бы и не дергался, но уж очень быстрый этот gulp.

 

Пытался запускать uglifycss отдельной задачей под watch, но тогда минифицированный css получается без ссылки на карту, так как uglifycss удаляет все комментарии и ссылку заодно.

 

[Animkim]

Что бы не плодить темы, спрошу тут, а gulp умеет развертывать директории файлов? А то в голове каша после чтения гугла, ищу что нибудь такое что бы в терминале одну команду давать и хоп под проект все собирается само по себе, хорошо бы еще что бы тянул свежие библиотеки из репозитория.

[npofopr]

а gulp умеет развертывать директории файлов

а разве что то умеет?

 

Для таких вещей существует bower вроде как и подобные ему. 

[Sergik+]

http://yeoman.io/

[Animkim]

Спасибо, да просто что бы знать где копать. Пойду в сторону Йомана там вроде вся связка, а то с англ. пока туго идет, а в рунете инфы вообще мало.