//'use strict';
// Project specific variables
var url = 'localhost/zay'; // Local dev URL. Change as needed.
// Load plugins
var gulp = require('gulp'),
stylus = require('gulp-stylus'),
//jeet = require('jeet'), // stylus grid
autoprefixer = require('gulp-autoprefixer'),
uglify = require('gulp-uglify'),
minifyCss = require('gulp-uglifycss'),
rupture = require('rupture'),
rename = require('gulp-rename'),
browserSync = require('browser-sync'),
reload = browserSync.reload;
// Styles
gulp.task('styles', function(){
gulp.src('./styl/*.styl') // Two files get compiled here: main stylsheet (all partials imported) and editor stylesheet. Makes for simple gulpfile config, but maybe not best approach. Comments welcome!
.pipe(stylus({
//paths: ['node_modules', 'styles/globals'],
//import: ['rupture/rupture', 'variables', 'mixins'],
use: [rupture()],
//'include css': true,
//'exclude':'node_modules',
sourcemap: { inline: true }
}))
.pipe(autoprefixer({
browsers: ['last 4 versions']
}))
.pipe(gulp.dest('./'))
.pipe(reload({ stream : true }))
// ---------------------------------------
// Uncomment next 3 lines for minified css
// ---------------------------------------
// .pipe(rename({ suffix: '.min' }))
// .pipe(minifyCss())
// .pipe(gulp.dest('./'))
console.log('Styles compiled!')
});
// Browser Sync
gulp.task('browser-sync', function(){
browserSync({
proxy: url
})
});
// Watch!
gulp.task('watch', ['browser-sync'], function(){
gulp.watch('./styl/**/*.styl', ['styles']);
console.log('Styles watched!')
});
// Watch2!
gulp.task('watch2', ['styles', 'browser-sync'], function(){
gulp.watch('./styl/**/*.styl', ['styles']);
console.log('Styles watched!')
});
Простой
