1 Тема від flatliner

  • flatliner
  • flatliner
  • Replace Group
  • Поза форумом
  • Звідки: Україна, Полтава
  • Дата реєстрації: 19.09.2016
  • Повідомлень: 998
    • Репутація: 703

Тема: gulp під ubuntu

Шановні, хто-небудь пробував налаштовувати gulp під ubuntu? Ніяких підводних каменів не виникало?
Бо в мене воно щось зовсім ніяк не працює... ні результату, ні якихось повідомлень про помилки...

Порядок дій, які я робив:

apt-get install nodejs node npm

потім я спочатку спробував без рута зробити оце:

npm install gulp-cli -g
npm install gulp -D

Це з їхнього сайту. Чи були якісь повідомлення про помилки не знаю, бо перший раз я спробував це робити через puppet, а вже коли побачив, що ніхрена не працює почав ковиряти вручну, тож наступну спробу я вже робив під рутом... було багато всяких повідомлень і все як наче відпрацювало, принаймні воно не закінчилося якимось критичним повідомленням про помилку. В результаті я отримав у /usr/local/bin дуже дивний сімлінк gulp на ../lib/node_modules/gulp-cli/bin/gulpl.js наступного змісту:

#!/usr/bin/env node

'use strict';

require('../')();

Це так і повинно бути? Мені цей файл видається якимось дивним.

Далі я в домашньому каталогу створив підкаталог js і в ньому gulpfile.js наступного змісту:

console.log('start');
var gulp = require('gulp');
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');

gulp.task('lint', function () {
  gulp.src('./*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('default'));
});

gulp.task('concat', function () {
    gulp.src('./*.js')
        .pipe(concat('test.js'))
        .pipe(gulp.dest('dist'));
});

gulp.task('minify', function () {
    gulp.src('./*.js')
        .pipe(concat('test.js'))
        .pipe(gulp.dest('dist'))
        .pipe(rename({suffix: '.min'}))
        .pipe(uglify())
        .pipe(gulp.dest('dist'));
});

gulp.task('clean', function () {
    return gulp.src(['dist'], {read: false})
        .pipe(clean());
});

gulp.task('default', ['clean'], function () {
    gulp.run('lint', 'concat');

    gulp.watch('./*.js', function (event) {
        gulp.run('lint', 'concat');
    }
});

gulp.task('build', ['clean'], function () {
    gulp.run('lint', 'minify');

    gulp.watch('./*.js', function (even) {
        gulp.run('lint', 'minify');
    }
});

Створив пару файлів test1.js і test2.js та спробував запустити спочатку gulp lint, потім просто gulp, також пробував gulp concant. Все це не дало за великим рахунком аж нічого. Як я вже писав, ніяких повідомлень про помилки, ніяких результатів. Чи може хтось запропонувати ідеї, що я міг зробити не так? :)

2 Відповідь від flatliner

  • flatliner
  • flatliner
  • Replace Group
  • Поза форумом
  • Звідки: Україна, Полтава
  • Дата реєстрації: 19.09.2016
  • Повідомлень: 998
    • Репутація: 703

Re: gulp під ubuntu

Бачу якось не дуже тут спіціялістів з gulp... Ну, тож буду першим ;)
Коротше, треба було робить так:

sudo apt-get install nodejs nodejs-legacy npm

sudo npm install gulp-cli -g
sudo npm install jshint gulp-jshint -g
sudo npm install gulp-concat -g
sudo npm install gulp-rename -g
sudo npm install gulp-uglify -g
sudo npm install gulp-autoprefixer -g
sudo npm install gulp-watch -g
// і так далі для всих потрібних плагінів

npm install gulp -D // це вже в папці проекту
npm link gulp
npm link gulp-jshint
npm link gulp-concat
npm link gulp-rename
npm link gulp-uglify
npm link gulp-autoprefixer
npm link gulp-watch
// для всі плагінів, що були встановлені і потрібні в проекті

Не те, щоб я ото робив не під рутом перед цим, просто я повставляв sudo, щоб акцентувати на цьому увагу... От після цього воно якось почало шевелитися, хоча це ще не останні граблі, на які я наступив... буде час, буду далі ковиряти... по пів кроку в тиждень, дивись до кінця життя, щось і зроблю :D

3 Відповідь від flatliner

  • flatliner
  • flatliner
  • Replace Group
  • Поза форумом
  • Звідки: Україна, Полтава
  • Дата реєстрації: 19.09.2016
  • Повідомлень: 998
    • Репутація: 703

Re: gulp під ubuntu

Як фінальний аккорд моїх колупань, такий Gulpfile.js:

var gulp = require('gulp');
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
var clean = require('gulp-clean');
var argv = require('yargs').argv;
var tasks = [];

// config for admin part (use option --admin)
var add_admin = function () {
    tasks.push({
    src: './js/src/admin/**/*.js',
    file: 'admin.js',
    dst: './public/assets/admin/js'
    });
};

// config for users part (use option --users)
var add_users = function () {
    tasks.push({
    src: './js/src/users/**/*.js',
    file: 'users.js',
    dst: './public/assets/js'
    });
}

// determine parts of project to process
// use option --all to choose all parts of project
if (argv.admin || argv.all) {
    add_admin();
} else {
    // default
    argv.users = true;
}
if (argv.users || argv.all) {
    add_users();
}

// check syntax
gulp.task('lint', function () {
    tasks.map(function (item) {
    gulp.src(item.src)
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
    });
});

// clean destination folders
gulp.task('clean', function () {
    tasks.map(function (item) {
        return gulp.src(item.dst+'/*.js', {read: false})
            .pipe(clean());
    });
});

// concatenate all files
gulp.task('concat', ['lint', 'clean'], function () {
    tasks.map(function (item) {
    gulp.src(item.src)
        .pipe(concat(item.file))
        .pipe(gulp.dest(item.dst));
    });
});

// minify concatenated file
gulp.task('minify', ['concat'], function () {
    tasks.map(function (item) {
    gulp.src(item.file)
        .pipe(gulp.dest(item.dst))
        .pipe(rename({suffix: '.min'}))
        .pipe(uglify())
        .pipe(gulp.dest(item.dst));
    });
});

// default task is concat (without minify)
gulp.task('default', ['concat']);

// build: lint, clean, concat and minify all parts of project
gulp.task('build', function () {
    tasks = [];
    add_admin();
    add_users();
    gulp.start('minify');
});