Skip to content

Instantly share code, notes, and snippets.

@hr-sadooghi
Last active August 31, 2017 17:38
Show Gist options
  • Save hr-sadooghi/3fcefe683d1e199f8e5e0250df3b427b to your computer and use it in GitHub Desktop.
Save hr-sadooghi/3fcefe683d1e199f8e5e0250df3b427b to your computer and use it in GitHub Desktop.
Simple sample of gulpjs file. Tasks of this gulpfile is: combine js file together, run babel to convert ES6 to lower compatible version, remove debugging commands like console.log, minify, store in two place.
const gulp = require('gulp');
const concat = require('gulp-concat');
const rename = require('gulp-rename');
const uglify = require('gulp-uglify');
const stripDebug = require('gulp-config-strip-debug');
const minifyCSS = require('gulp-minify-css');
const babel = require('gulp-babel');
const include = require("gulp-include");
const gutil = require('gulp-util');
//Add list of js files here
const jsFiles = [
'src/js/*.js',
];
//Add list of js files here
const cssFiles = [
'src/css/*.css'
];
//Destination path
const jsDest = 'dist', cssDest = 'dist', distFileName = 'app', jsDest2 = 'other/dist';
gulp.task('css', function () {
return gulp.src(cssFiles)
.pipe(minifyCSS())
.pipe(concat(distFileName+'.min.css'))
.pipe(gulp.dest(cssDest));
});
gulp.task('scripts', function () {
return gulp.src(jsFiles)
.pipe(babel({presets: ['env']}))
.pipe(concat(distFileName + '.js'))
.pipe(gulp.dest(jsDest))
.pipe(gulp.dest(jsDest2))
.pipe(uglify().on('error', function (err) {
gutil.log(gutil.colors.red('[Error]'), err.toString());
this.emit('end');
}))
.pipe(rename(distFileName+'.min.js'))
.pipe(gulp.dest(jsDest))
.pipe(gulp.dest(jsDest2));
});
gulp.task('prod', function () {
return gulp.src(jsFiles)
.pipe(babel({presets: ['env']}))
.pipe(stripDebug())
.pipe(concat(distFileName+'.js'))
.pipe(gulp.dest(jsDest))
.pipe(gulp.dest(jsDest2))
.pipe(uglify().on('error', function (err) {
gutil.log(gutil.colors.red('[Error]'), err.toString());
this.emit('end');
}))
.pipe(rename(distFileName+'.min.js'))
.pipe(gulp.dest(jsDest))
.pipe(gulp.dest(jsDest2));
});
// Rerun the task when a file changes
gulp.task('watch', function () {
gulp.watch(jsFiles, ['scripts']);
});
// The default task (called when you run `gulp` from cli)
gulp.task('default', ['scripts']);
{
"name": "",
"version": "",
"description": "",
"main": "gulpfile.js",
"dependencies": {
"webpack": "^3.0.0",
"jquery": "^3.2.1"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-plugin-transform-es2015-classes": "^6.24.1",
"babel-preset-env": "^1.6.0",
"gulp": "^3.9.1",
"gulp-babel": "^7.0.0",
"gulp-bundle-assets": "^2.28.0",
"gulp-concat": "^2.6.1",
"gulp-config-strip-debug": "^1.0.0",
"gulp-rename": "^1.2.2",
"gulp-uglify": "^3.0.0"
},
"scripts": {
"prod": "./node_modules/.bin/gulp prod",
"build": "./node_modules/.bin/gulp",
"watch": "./node_modules/.bin/gulp watch",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": ""
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment