7dreams/gulpfile.js at master · PRakulaStudio/7dreams · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
const gulp = require('gulp');
const autoprefixer = require('gulp-autoprefixer');
const cleanCSS = require('gulp-clean-css');
const sass = require('gulp-sass');
const browserSync = require('browser-sync').create();
const gcmq = require('gulp-group-css-media-queries');
const rename = require('gulp-rename');
const notify = require('gulp-notify');
const config = {
    root: './assets/',
    html: {
        src: 'index.dev.html'
    },
    sass: {
        watch: 'sass/**/*.sass',
        src: 'sass/**/*.sass',
        dest: 'sass'
    },
    css: {
        watch: 'css/*.css',
        src: 'css/*.css',
        srcMin: 'css/*.min.css',
        dest: 'css'
    }
};


gulp.task('build', function () {
    return gulp.src(config.root + config.sass.src)
        .pipe(sass().on('error', notify.onError({
            message: "<%= error.message %>",
            title: "Sass Error!"
        })))
        .pipe(gcmq())
        .pipe(autoprefixer({
            browsers: ['> 0.1%']
        }))
        .pipe(gulp.dest(config.root + config.css.dest))
        .pipe(browserSync.reload({
            stream: true
        }))
});

gulp.task('minimize', ['build'], function () {
    return gulp.src([config.root + config.css.src, '!' + config.root + config.css.srcMin])
        .pipe(rename({suffix: '.min', prefix: ''}))
        .pipe(cleanCSS({
            level: 2
        }))
        .pipe(gulp.dest(config.root + config.css.dest))
        .pipe(browserSync.reload({
            stream: true
        }))
});


gulp.task('watch', ['browserSync'], function () {
    gulp.watch(config.root + config.sass.watch, ['minimize']);
    gulp.watch(config.html.src, browserSync.reload);
});

gulp.task('browserSync', function () {
    browserSync.init({
        server: {
            basedir: config.root
        }
    })
});

const smartgrid = require('smart-grid');

/* It's principal settings in smart grid project */
let settings = {
    filename: '_smart-grid',
    outputStyle: 'sass', /* less || scss || sass || styl */
    columns: 12, /* number of grid columns */
    offset: '15px', /* gutter width px || % */
    mobileFirst: false, /* mobileFirst ? 'min-width' : 'max-width' */
    container: {
        maxWidth: '1120px', /* max-width оn very large screen */
        fields: '15px' /* side fields */
    },
    breakPoints: {
        xl: {
            width: '1366px', /* -> @media (max-width: 1100px) */
        },
        lg: {
            width: '1100px', /* -> @media (max-width: 1100px) */
        },
        md: {
            width: '960px'
        },
        sm: {
            width: '780px'//,
            //fields: '15px' /* set fields only if you want to change container.fields */
        },
        xs: {
            width: '560px'
        }
        /*
        We can create any quantity of break points.

        some_name: {
            width: 'Npx',
            fields: 'N(px|%|rem)',
            offset: 'N(px|%|rem)'
        }
        */
    }
};

gulp.task('grid', function () {
    smartgrid(config.root+config.sass.dest, settings)
})