Skip to content

Instantly share code, notes, and snippets.

@itsHall
Last active September 27, 2019 20:57
Show Gist options
  • Save itsHall/48956ce65403f7dac5be83c9645f5955 to your computer and use it in GitHub Desktop.
Save itsHall/48956ce65403f7dac5be83c9645f5955 to your computer and use it in GitHub Desktop.
Gulpfile with Sourcemaps and File Minification
'use strict';
var config = {
project: 'bta',
stylePaths: [
'./scss/style.scss'
],
jsPaths: [
'./js/*'
]
};
var gulp = require('gulp'),
sass = require('gulp-sass'),
rename = require('gulp-rename'),
csso = require('gulp-csso'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
sourcemaps = require('gulp-sourcemaps');
// Styles task
gulp.task('stylesheet', function () {
gulp.src(config.stylePaths)
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(csso())
.pipe(rename('style.css'))
.pipe(sourcemaps.write('maps'))
.pipe(gulp.dest('./'));
});
// Javascript task
gulp.task('javascript', function() {
gulp.src(config.jsPaths)
.pipe(sourcemaps.init())
// Bundle to a single file
.pipe(concat('bundle.js'))
.pipe(uglify())
.pipe(sourcemaps.write('maps'))
.pipe(gulp.dest('./dist/'));
});
// Watch tasks
gulp.task('watch', function() {
// styles
gulp.watch(['./scss/**/*.scss'], [
'stylesheet'
]);
gulp.watch(config.jsPaths, [
'javascript'
]);
});
// build task
gulp.task('build', ['stylesheet', 'javascript']);
// default task
gulp.task('default', ['build', 'watch']);
"devDependencies": {
"csso": "^2.2.1",
"node-sass": "^4.11.0"
},
"dependencies": {
"gulp": "^3.9.1",
"gulp-concat": "*",
"gulp-csso": "^2.0.0",
"gulp-rename": "*",
"gulp-sass": "^4.0.2",
"gulp-sourcemaps": "^2.6.5",
"gulp-uglify": "*"
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment