Last active
February 4, 2018 18:44
-
-
Save antonioOrtiz/2bf2e27b8e0a23115034 to your computer and use it in GitHub Desktop.
My first gulp file!
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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'] ); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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
$