Skip to content

Instantly share code, notes, and snippets.

@robertweiss
Last active August 29, 2015 14:19
Show Gist options
  • Select an option

  • Save robertweiss/7b199661f927a3cb1066 to your computer and use it in GitHub Desktop.

Select an option

Save robertweiss/7b199661f927a3cb1066 to your computer and use it in GitHub Desktop.
RW Gulp Boilerplate
assets/js/vendor/**/*.js
assets/bower_components/**/*.js
assets/cmp/**/*.js
// Plugins initieren
var gulp = require('gulp'),
plugins = require('gulp-load-plugins')({
pattern: ['gulp-*', 'gulp.*', 'browser-sync', 'yargs', 'request-json', 'node-notifier']
}),
browserSync = plugins.browserSync.create();
var sassError = function(err) {
var errStr = 'Zeile ' + err.lineNumber + ' in ' + err.fileName;
plugins.nodeNotifier.notify({'title': err.message, 'message': errStr });
console.log(err.message + ' | ' + errStr);
this.emit('end');
};
var jsError = function(err) {
plugins.nodeNotifier.notify({'title': 'JSHint Error', 'message': err.message });
console.log(err.message);
this.emit('end');
};
var svgError = function(err) {
plugins.nodeNotifier.notify({'title': 'SVG Error', 'message': err.message });
console.log(err);
this.emit('end');
};
var imgError = function(err) {
plugins.nodeNotifier.notify({'title': 'Image Error', 'message': err.message });
console.log(err);
this.emit('end');
};
// Projektbezogene Variablen definieren
var url = require('./package.json').homepage || 'localhost',
paths = {
static: './',
sass: './assets/sass/',
css: './assets/css/',
svg: './assets/svg/',
img: './assets/img/',
js: './assets/js/'
},
files = {
static: paths.static+'**/*.{php,htm,html}',
sass: paths.sass+'**/*.scss',
svg: paths.svg+'sprites/*.svg',
img: paths.img+'src/*.{jpg,jpeg,png}',
js: require(paths.js+'plugins.json').plugins
};
// Sass-Task für Dev mit Autoprefixer und Sourcemaps
gulp.task('sass', function () {
return gulp.src(files.sass)
.pipe(plugins.plumber({errorHandler: sassError}))
.pipe(plugins.debug({title: 'sass:'}))
.pipe(plugins.sourcemaps.init())
.pipe(plugins.sass())
.pipe(plugins.autoprefixer())
.pipe(plugins.sourcemaps.write('.'))
.pipe(plugins.size({showFiles:true}))
.pipe(gulp.dest(paths.css))
.pipe(plugins.filter('**/*.css'))
.pipe(browserSync.reload({stream: true}));
});
// Sass-Task für Prod mit unCSS und Minfiy und ohne Sourcemaps
gulp.task('sass-prod', function () {
plugins.requestJson.createClient(url).get('/sitemap.json', function(err, res, body) {
if (err && res.statusCode === 200) {
console.log('Sitemap für UnCSS nicht gefunden');
return false;
}
return gulp.src(files.sass)
.pipe(plugins.plumber({errorHandler: sassError}))
.pipe(plugins.debug({title: 'sass-prod:'}))
.pipe(plugins.sass())
.pipe(plugins.uncss({html: body.urls}))
.pipe(plugins.autoprefixer())
.pipe(plugins.minifyCss())
.pipe(plugins.size({showFiles:true}))
.pipe(gulp.dest(paths.css));
});
});
// JS-Task mit Concat und Uglify
gulp.task('js', function() {
return gulp.src(files.js)
.pipe(plugins.plumber({errorHandler: jsError}))
.pipe(plugins.debug({title: 'js:'}))
.pipe(plugins.sourcemaps.init())
.pipe(plugins.jshint())
.pipe(plugins.jshint.reporter('jshint-stylish'))
.pipe(plugins.jshint.reporter('fail'))
.pipe(plugins.concat('app.min.js'))
.pipe(plugins.if(plugins.yargs.argv.prod, plugins.uglify()))
.pipe(plugins.sourcemaps.write('.'))
.pipe(plugins.size({showFiles:true}))
.pipe(gulp.dest(paths.js));
});
var svgSpriteConfig = {
shape: {
id: {
generator: "icon-%s"
},
dimension: {
maxWidth: 64,
maxHeight: 64,
precision: 1
}
},
transform: [
{svgo: {plugins: [{cleanupIDs: false}]}}
],
svg: {
xmlDeclaration: '',
doctypeDeclaration: '',
namespaceIDs: false
},
mode: {
symbol: {
dest: '.',
bust: false,
inline: true,
sprite: 'sprites.svg',
prefix: ".icon__%s",
dimensions: "%s",
render: {
scss: {
dest: '../sass/common/_icons.scss',
template: paths.svg+'tpl/sprites.scss'
}
},
example: {
dest: 'sprites.html',
template: paths.svg+'tpl/sprites.html'
}
}
}
};
// SVG-Task mit SVGMin
gulp.task('svg', function () {
return gulp.src(files.svg)
.pipe(plugins.plumber({errorHandler: svgError}))
.pipe(plugins.svgSprite(svgSpriteConfig))
.pipe(plugins.size({showFiles:true}))
.pipe(gulp.dest(paths.svg));
});
// Img-Task mit imgMin
gulp.task('img', function () {
return gulp.src(files.img)
.pipe(plugins.plumber({errorHandler: imgError}))
.pipe(plugins.changed(paths.img))
.pipe(plugins.imageoptim.optimize())
.pipe(plugins.size({showFiles:true}))
.pipe(gulp.dest(paths.img));
});
// Watch-Task mit Browser-Sync
gulp.task('watch', function() {
browserSync.init({
notify: false,
open: false,
server: {
baseDir: "./",
index: "index.htm"
}
});
gulp.watch(files.sass, ['sass']);
gulp.watch(files.img, ['img']);
gulp.watch([files.js, paths.js+'plugins.json'], ['js']);
var watchFiles = [
files.static,
paths.js+'*.min.js'
];
gulp.watch(watchFiles).on('change', browserSync.reload);
});
// Watch-Task als Default
gulp.task('default', ['watch']);
{
"name": "Frontend-Tasks",
"homepage": "http://localhost:3000",
"version": "1.0.0",
"description": "",
"main": "gulpfile.js",
"devDependencies": {
"browser-sync": "^2.6.4",
"gulp": "^3.8.11",
"gulp-autoprefixer": "^2.1.0",
"gulp-changed": "^1.2.1",
"gulp-concat": "^2.5.2",
"gulp-debug": "^2.0.1",
"gulp-filter": "^2.0.2",
"gulp-if": "^1.2.5",
"gulp-imagemin": "^2.2.1",
"gulp-imageoptim": "^0.2.1",
"gulp-jshint": "^1.10.0",
"gulp-load-plugins": "^0.10.0",
"gulp-minify-css": "^1.1.0",
"gulp-plumber": "^1.0.0",
"gulp-sass": "^1.3.3",
"gulp-size": "^1.2.1",
"gulp-sourcemaps": "^1.5.2",
"gulp-svg-sprite": "^1.1.2",
"gulp-uglify": "^1.2.0",
"gulp-uncss": "^1.0.1",
"jshint-stylish": "^1.0.1",
"node-notifier": "^4.2.1",
"request-json": "^0.5.2",
"vinyl": "^0.4.6",
"yargs": "^3.7.2"
},
"author": "Robert Weiss",
"license": "ISC",
"jshintConfig": {}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment