gulpfile.js templates

gulpfile.js

var gulp = require("gulp"),
    fastSass = require("gulp-sass"),
    autoprefixer = require('gulp-autoprefixer'),
    sourcemaps = require('gulp-sourcemaps'),
    rename = require("gulp-rename"),
    imagemin = require('gulp-imagemin'),
    iconfont = require('gulp-iconfont'),
    iconfontCss = require('gulp-iconfont-css'),
    jshint = require('gulp-jshint'),
    concat = require('gulp-concat-util'),
    uglify = require('gulp-uglify'),
    args = require('yargs').argv,
    cleanCSS = require('gulp-clean-css'),
    $ = require('gulp-load-plugins')({lazy: true});


/**
 * Variables
 */
fontName = 'Icons';

var paths = {
    imageSrcFiles: '../../images/**/*',
    imagesDestFolder: '../../images',
    sassSrcFiles: 'css/**/*.scss',
    sassDestFolder: 'css',
    jsSrcFiles: 'js/main.js',
    jsDestFolder: 'js',
    vendorSrcFolder: 'js/vendor/*.js',
    vendorDestFolder: 'js/vendor',
    watchCssFiles: 'css/**/*.{scss,sass}',
    watchJsFiles: 'js/**/*.js',
    iconfontSrcFiles: 'icons/*.svg',
    iconfontDestFolder: 'fonts/icon-fonts',
    iconfontScssDestFile: '../../css/generic/_icon-fonts.scss',
    iconfontTemplateFile: 'css/iconfonts_template/_icons.scss',
    iconfontFontsDestFolder: '../fonts/icon-fonts/',

};

/**
 * Image optimization
 */
gulp.task('imagemin', function () {
    gulp.src(paths.imageSrcFiles)
        .pipe(imagemin())
        .pipe(gulp.dest(paths.imagesDestFolder));
});

/**
 * Compile with Libass
 */
gulp.task('fast-sass', function () {
    return gulp.src(paths.sassSrcFiles)
        .pipe(sourcemaps.init())
        .pipe(fastSass({style: 'expanded'}))
        .on('error', fastSass.logError)
        // .pipe(sourcemaps.write({includeContent: false}))
        // .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(autoprefixer({
            browsers: ['last 4 versions'],
            cascade: false
        }))
        .pipe(cleanCSS({compatibility: 'ie9'}))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(paths.sassDestFolder));
});

/**
 * Concatenates js files
 */
gulp.task('scripts', function () {
    return gulp
        .src(paths.jsSrcFiles)
        .pipe($.jshint.reporter('fail'))
        .pipe(concat('main.js'))
        .pipe(concat.header('// file: <%= file.path %>\n'))
        .pipe(concat.footer('\n// end\n'))
        .pipe(uglify())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest(paths.jsDestFolder))
});

/**
 * Concatenates vendors js files
 */
gulp.task('vendors', function () {
    return gulp.src(paths.vendorSrcFolder)
        .pipe(concat('vendor.js'))
        .pipe(uglify())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest(paths.vendorDestFolder))
});

/**
 * Create icon fonts from several SVG icons
 */
gulp.task('iconfont', function () {
    // Put your svg here
    return gulp.src([paths.iconfontSrcFiles])
    // Generate iconfont scss here
        .pipe(iconfontCss({
            fontName: fontName,
            // Generate iconfonts scss using icons.scss
            path: paths.iconfontTemplateFile,
            // Destination scss file
            targetPath: paths.iconfontScssDestFile,
            fontPath: paths.iconfontFontsDestFolder,
            cssClass: 'icon'
        }))
        // Generate icon font
        .pipe(iconfont({
            fontName: fontName,
            appendCodepoints: true,
            formats: ['ttf', 'eot', 'woff', 'woff2', 'svg'],
            normalize: true,
            fontHeight: 1001

        }))
        .on('codepoints', function (codepoints, options) {
            // CSS templating, e.g.
            console.log(codepoints, options);
        })
        .pipe(gulp.dest(paths.iconfontDestFolder));
});

/**
 * Build
 */
gulp.task('build', ['fast-sass', 'scripts', 'vendors']);

/**
 * Default task
 */
gulp.task('default', ['fast-sass', 'scripts'], function () {
    gulp.watch(paths.watchCssFiles, ['fast-sass']);
    gulp.watch(paths.watchJsFiles, ['scripts']);
});