Skip to content

Instantly share code, notes, and snippets.

@antonioOrtiz
Last active February 4, 2018 18:44
Show Gist options
  • Save antonioOrtiz/2bf2e27b8e0a23115034 to your computer and use it in GitHub Desktop.
Save antonioOrtiz/2bf2e27b8e0a23115034 to your computer and use it in GitHub Desktop.
My first gulp file!
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
gulpif = require('gulp-if'),
usemin = require('gulp-usemin'),
uglify = require('gulp-uglify'),
gutil = require('gulp-util'),
concat = require('gulp-concat'),
plumber = require('gulp-plumber'),
browserify = require('gulp-browserify'),
minifyHTML = require('gulp-minify-html'),
imagemin = require('gulp-imagemin'),
pngcrush = require('imagemin-pngcrush'),
newer = require('gulp-newer'),
open = require("gulp-open"),
fileinclude = require('gulp-file-include'),
uncss = require('gulp-uncss'),
notify = require('gulp-notify');
var browserSync = require('browser-sync');
var env,
jsSources,
htmlSources,
sassSources,
outputDir;
env = process.env.NODE_ENV || 'development';
if (env === 'development'){
outputDir = 'builds/development/';
sassStyle = 'expanded';
} else {
outputDir = 'builds/production/';
sassStyle = 'compressed';
}
jsSources = ['components/js/*.js'];
htmlSources = [outputDir + '*.html'];
sassSources = ['components/scss/**/*.scss'];
gulp.task('fileinclude', function() {
// content
gulp.src('components/index.html')
.pipe(fileinclude())
.pipe(gulp.dest('builds/development/'))
.pipe( notify({ message: "fileInclude tasks have been completed!"}) );
});
gulp.task('html', function() {
gulp.src('builds/development/*.html')
.pipe(gulpif(env === 'production', minifyHTML()))
.pipe(gulpif(env === 'production', gulp.dest(outputDir)))
.pipe( notify({ message: "HTML tasks have been completed!"}) );
});
// URL task
gulp.task('url', function() {
var options = {
url: "http://localhost:3001",
app: "google-chrome",
};
gulp.src('builds/development/index.html')
.pipe(open("", {app: "google-chrome", url: "http://localhost:3001"}))
.pipe(plumber());
});
// browserSync task
gulp.task('browser-sync', function() {
browserSync( ['builds/development/*.html','builds/development/css/*.css','builds/development/js/*.js' ],{
server: {
baseDir: "builds/development/"
}
});
});
//image task
gulp.task('images', function() {
gulp.src('builds/development/images/**/*.*')
.pipe(newer(outputDir + 'images'))
.pipe(gulpif(env === 'production', imagemin({
optimizationLevel: 7,
interlaced: true,
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use:[pngcrush()]
})))
.pipe(gulpif(env === 'production', gulp.dest(outputDir + 'images')))
.pipe(plumber())
.pipe( notify({ message: "Images tasks have been completed!"}) );
});
//sass task
gulp.task('sass', function() {
gulp.src(sassSources)
.pipe(sass({
style: sassStyle,
sourcemap: true,
sourcemapPath: 'components/scss/main.scss'
}))
.pipe(gulp.dest(outputDir + 'css'))
.pipe(plumber())
.pipe( notify({ message: "Sass tasks have been completed!"}) );
});
gulp.task('uncss', function() {
gulp.src('builds/development/css/main.css')
.pipe(gulpif(env === 'production', uncss({
html: ['builds/development/index.html']
})))
.pipe(gulp.dest('builds/production/css/'))
.pipe(plumber())
.pipe( notify({ message: "The uncss taskgu have been completed!"}) );
});
// scripts task
// uglifies
gulp.task('scripts', function() {
gulp.src(jsSources)
.pipe(concat('main.js'))
.pipe(browserify())
.pipe(gulpif(env === 'production', uglify()))
.pipe(gulp.dest(outputDir +'js') )
.pipe(plumber())
.pipe( notify({ message: "Scripts tasks have been completed!"}) );
});
//watch task
gulp.task('watch', function() {
gulp.watch('builds/development/*.html', ['html']);
gulp.watch('components/*.html', ['url']);
gulp.watch('components/index.html', ['fileinclude']);
gulp.watch('builds/development/images/**/*.*', ['images']);
gulp.watch(sassSources, ['sass']);
gulp.watch(jsSources, ['scripts']);
});
gulp.task('default', ['uncss','fileinclude', 'html', 'sass', 'scripts', 'images', 'url', 'browser-sync', 'watch'] );
@johnnycruise
Copy link

Hi , I have tried these codes ,and got the error again and again. like this!
Administrator@PC201702200934 C:\Users\Administrator\Desktop\demo
-of-gulp
$ gulp
[09:28:02] Using gulpfile ~\Desktop\demo-of-gulp\gulpfile.js
[09:28:02] Starting 'uncss'...
[09:28:02] Finished 'uncss' after 11 ms
[09:28:02] Starting 'fileinclude'...
[09:28:02] Finished 'fileinclude' after 2.94 ms
[09:28:02] Starting 'html'...
[09:28:02] Finished 'html' after 2.06 ms
[09:28:02] Starting 'sass'...
[09:28:02] 'sass' errored after 1.04 ms
[09:28:02] TypeError: dest.on is not a function
at DestroyableTransform.Readable.pipe (C:\Users\Administrato
r\Desktop\demo-of-gulp\node_modules\vinyl-fs\node_modules\readab
le-stream\lib_stream_readable.js:516:8)
at Gulp. (C:\Users\Administrator\Desktop\demo-of-
gulp\gulpfile.js:95:8)
at module.exports (C:\Users\Administrator\Desktop\demo-of-gu
lp\node_modules\orchestrator\lib\runTask.js:34:7)
at Gulp.Orchestrator._runTask (C:\Users\Administrator\Deskto
p\demo-of-gulp\node_modules\orchestrator\index.js:273:3)
at Gulp.Orchestrator.runStep (C:\Users\Administrator\Deskto
p\demo-of-gulp\node_modules\orchestrator\index.js:214:10)
at C:\Users\Administrator\Desktop\demo-of-gulp\node_modules
orchestrator\index.js:279:18
at finish (C:\Users\Administrator\Desktop\demo-of-gulp\node

modules\orchestrator\lib\runTask.js:21:8)
at module.exports (C:\Users\Administrator\Desktop\demo-of-gu
lp\node_modules\orchestrator\lib\runTask.js:60:3)
at Gulp.Orchestrator._runTask (C:\Users\Administrator\Deskto
p\demo-of-gulp\node_modules\orchestrator\index.js:273:3)
at Gulp.Orchestrator.runStep (C:\Users\Administrator\Deskto
p\demo-of-gulp\node_modules\orchestrator\index.js:214:10)
at C:\Users\Administrator\Desktop\demo-of-gulp\node_modules
orchestrator\index.js:279:18
at finish (C:\Users\Administrator\Desktop\demo-of-gulp\node

modules\orchestrator\lib\runTask.js:21:8)
at module.exports (C:\Users\Administrator\Desktop\demo-of-gu
lp\node_modules\orchestrator\lib\runTask.js:60:3)
at Gulp.Orchestrator._runTask (C:\Users\Administrator\Deskto
p\demo-of-gulp\node_modules\orchestrator\index.js:273:3)
at Gulp.Orchestrator._runStep (C:\Users\Administrator\Deskto
p\demo-of-gulp\node_modules\orchestrator\index.js:214:10)
at C:\Users\Administrator\Desktop\demo-of-gulp\node_modules
orchestrator\index.js:279:18
[09:28:02] gulp-notify: [Gulp notification] HTML tasks have been
completed!

Administrator@PC201702200934 C:\Users\Administrator\Desktop\demo
-of-gulp
$

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment