I have a project using gulp to compile all my scss. Now I have a need for two separate builds. Currently my task builds out sites-bootstrap.css. I have another set of css files that is set up to build sites-life-bootstrap.css that will have minimal components in it. I just can't seem to get gulp to build that separate css file.
Below is my current working gulp file.js.
/* jshint node:true */
'use strict';
// generated on 2015-02-10 using generator-gulp-webapp 0.2.0
var gulp = require('gulp');
var fs = require('fs');
require('gulp-grunt')(gulp);
var runs = require('run-sequence');
var $ = require('gulp-load-plugins')();
//build the compile using assemble + grunt
//Note: Assemble's gulp task is very alpha - easier to do this
gulp.task('compile', function(){
gulp.run('grunt-compile');
});
gulp.task('styles', function () {
var sassPaths = ['./bower_components/bootstrap-sass-official/assets/stylesheets'];
return gulp.src('app/styles/sites-bootstrap.scss')
.pipe($.plumber())
.pipe($.sass({
style: 'expanded',
includePaths: sassPaths,
precision: 10
}))
.pipe($.autoprefixer({browsers: ['last 1 version']}))
.pipe($.replace('../bower_components/bootstrap-sass-official/assets/fonts/bootstrap','../fonts'))
.pipe(gulp.dest('dist/styles'));
});
gulp.task('jshint', function () {
return gulp.src('app/scripts/**/*.js')
.pipe($.jshint())
.pipe($.jshint.reporter('jshint-stylish'))
.pipe($.jshint.reporter('fail'));
});
gulp.task('html', ['styles'], function () {
var lazypipe = require('lazypipe');
var cssChannel = lazypipe()
.pipe($.csso);
var assets = $.useref.assets({searchPath: '{.tmp,app}'});
//all the build instructions are in build.html NOT in the hbs files
return gulp.src('app/useref/build.html')
.pipe(assets)
.pipe($.if('*.js', $.uglify()))
.pipe($.if('*.css', cssChannel()))
.pipe(assets.restore()) //do the asset replacement in the html files
.pipe($.useref())
.pipe(gulp.dest('dist'));
});
gulp.task('images', function () {
return gulp.src('app/images/**/*')
.pipe($.cache($.imagemin({
progressive: true,
interlaced: true
})))
.pipe(gulp.dest('dist/images'));
});
gulp.task('fonts', function () {
return gulp.src(require('main-bower-files')().concat('app/fonts/**/*'))
.pipe($.filter('**/*.{eot,svg,ttf,woff,woff2}'))
.pipe($.flatten())
.pipe(gulp.dest('dist/fonts'));
});
gulp.task('extras', function () {
return gulp.src([
'app/extras/*.*'
], {
dot: true
})
.pipe(gulp.dest('dist'));
});
/**
* clean out dist and .tmp
*/
gulp.task('clean', function (cb) {
var del = require('del');
del([
'./.tmp',
'./dist/*',
], cb);
});
gulp.task('connect', ['styles'], function () {
var serveStatic = require('serve-static');
var serveIndex = require('serve-index');
var app = require('connect')()
.use(require('connect-livereload')({port: 35729}))
.use(serveStatic('dist'))
.use(serveIndex('dist'));
require('http').createServer(app)
.listen(9000)
.on('listening', function () {
console.log('Started connect web server on http://localhost:9000');
});
});
gulp.task('cdn', function(){
var json = fs.readFileSync('gulp-aws.json');
var aws = JSON.parse(json);
var opts = aws.cdn;
// create a new publisher
var publisher = $.awspublish.create(opts);
var sourceFolder = ['./dist/styles','./dist/fonts','./dist/images'];
return gulp.src(sourceFolder)
// gulp-awspublish-router defines caching and other options (see above)
//.pipe(awspublishRouter(awsPubRouterOpts))
// publisher will add Content-Length, Content-Type and headers specified above
// if not specified it will set x-amz-acl to public-read by default
// i think the parallelization was causing it to miss some files
.pipe(publisher.publish())
// .pipe(publisher.publish(null, { force: true }))
// delete stuff that has been deleted locally
// can't do this because it will kill 1.9
//.pipe(publisher.sync())
// create a cache file to speed up consecutive uploads
.pipe(publisher.cache())
// print upload updates to console
.pipe($.awspublish.reporter());
});
gulp.task('serve', function (done) {
runs( ['build'], ['watch'], ['open'], done);
});
gulp.task('open', function(){
require('opn')('http://localhost:9000');
});
gulp.task('watch', ['connect'], function () {
$.livereload.listen();
// watch for changes
gulp.watch([
'dist/**/*.html',
'.tmp/styles/**/*.css',
'dist/scripts/**/*.js',
'dist/images/**/*'
]).on('change', $.livereload.changed);
gulp.watch('app/styles/**/*.scss', ['styles']);
gulp.watch('app/**/*.hbs', ['compile']);
});
gulp.task('reload', function(){
$.livereload.changed();
});
gulp.task('deploy', function(done) {
// return gulp.src('./dist/**/*')
// .pipe($.ghPages({origin: 'upstream'}));
console.error('DEPRECATED: Deployment to gh-pages is now handled by Travis CI.');
done();
});
gulp.task('build-report', function () {
return gulp.src('dist/**/*').pipe($.size({title: 'build', gzip: true}));
});
gulp.task('build', function (done) {
runs( ['clean'], ['jshint', 'html', 'images', 'fonts', 'extras'], 'compile', 'build-report', done);
});
gulp.task('default', ['clean'], function () {
gulp.start('build');
});
Here was one attempt at just adding multiple outputs to the styles task:
gulp.task('styles', function () {
var sassPaths = ['./bower_components/bootstrap-sass-official/assets/stylesheets'];
return gulp.src('app/styles/sites-bootstrap.scss', 'app/styles/sites-lite-bootstrap.scss')
.pipe($.plumber())
.pipe($.sass({
style: 'expanded',
includePaths: sassPaths,
precision: 10
}))
.pipe($.autoprefixer({browsers: ['last 1 version']}))
.pipe($.replace('../bower_components/bootstrap-sass-official/assets/fonts/bootstrap','../fonts'))
.pipe(gulp.dest('dist/styles'));
});
Related
Everything is working fine, except that LiveReload is not watching for changes, and therefore it does not auto-reload the page.
What am I doing wrong?
Here is my Gulp file:
// Gulp.js configuration
var
// modules
gulp = require('gulp'),
newer = require('gulp-newer'),
imagemin = require('gulp-imagemin'),
pug = require('gulp-pug'),
htmlclean = require('gulp-htmlclean'),
concat = require('gulp-concat'),
deporder = require('gulp-deporder'),
stripdebug = require('gulp-strip-debug'),
uglify = require('gulp-uglify'),
sass = require('gulp-sass'),
postcss = require('gulp-postcss'),
assets = require('postcss-assets'),
autoprefixer = require('autoprefixer'),
mqpacker = require('css-mqpacker'),
cssnano = require('cssnano'),
browserSync = require('browser-sync').create(),
// development mode?
devBuild = (process.env.NODE_ENV !== 'production'),
// folders
folder = {
src: 'src/',
build: 'build/'
};
// image processing
gulp.task('images', function () {
var out = folder.build + 'images/';
return gulp.src(folder.src + 'images/**/*')
.pipe(newer(out))
.pipe(imagemin({
optimizationLevel: 5
}))
.pipe(gulp.dest(out));
});
// Pug processing
gulp.task('pug', function buildHTML() {
var out = folder.build
return gulp.src(folder.src + 'views/*.pug')
.pipe(pug({
pretty: true
}))
.pipe(gulp.dest(out))
});
// HTML processing
gulp.task('html', ['images'], function () {
var
out = folder.build + 'html/',
page = gulp.src(folder.src + 'html/**/*')
.pipe(newer(out));
// minify production code
if (!devBuild) {
page = page.pipe(htmlclean());
}
return page.pipe(gulp.dest(out));
});
// JavaScript processing
gulp.task('js', function () {
var jsbuild = gulp.src(folder.src + 'js/**/*')
.pipe(deporder())
.pipe(concat('main.js'));
if (!devBuild) {
jsbuild = jsbuild
.pipe(stripdebug())
.pipe(uglify());
}
return jsbuild.pipe(gulp.dest(folder.build + 'js/'));
});
// CSS processing
gulp.task('css', ['images'], function () {
var postCssOpts = [
assets({
loadPaths: ['images/']
}),
autoprefixer({
browsers: ['last 2 versions', '> 2%']
}),
mqpacker
];
if (!devBuild) {
postCssOpts.push(cssnano);
}
return gulp.src(folder.src + 'scss/styles.scss')
.pipe(sass({
outputStyle: 'nested',
imagePath: 'images/',
precision: 3,
errLogToConsole: true
}))
.pipe(postcss(postCssOpts))
.pipe(gulp.dest(folder.build + 'css/'));
});
gulp.task('browserSync', function () {
browserSync.init({
server: {
baseDir: folder.build
},
port: 3000
});
});
// run all tasks
gulp.task('run', ['pug', 'html', 'css', 'js']);
// watch for changes
gulp.task('watch', ['browserSync'], function () {
// image changes
gulp.watch(folder.src + 'images/**/*', ['images']);
// pug changes
gulp.watch(folder.src + 'views/**/*', ['pug'], browserSync.reload);
// html changes
gulp.watch(folder.src + 'html/**/*', ['html'], browserSync.reload);
// javascript changes
gulp.watch(folder.src + 'js/**/*', ['js'], browserSync.reload);
// css changes
gulp.watch(folder.src + 'scss/**/*', ['css'], browserSync.reload);
});
// default task
gulp.task('default', ['run', 'watch']);
A sample of our working watch gulp configuration is like:
var watch = require('gulp-watch');
watch('./src/**/*.html', function () {
browserSync.reload();
});
My command line shows following error while i entered the gulp watch command. Since gulp is searching css files from inside the app directory instead of searching it from bower_components.I have tried using minify-css as well as copy-css.Both are not working.
events.js:160
throw er; // Unhandled 'error' event
^
Error: Path F:\Backup Folder\coursera-project\Full stack course\Angular Js\Assignments\week1\confusion\app\bower_components\bootstrap\dist\css\bootstrap.min.css not found!
My gulpfile.js file
'use strict';
var gulp = require('gulp'),
cleancss = require('gulp-clean-css'),
jshint = require('gulp-jshint'),
stylish = require('jshint-stylish'),
uglify = require('gulp-uglify'),
usemin = require('gulp-usemin'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
changed = require('gulp-changed'),
rev = require('gulp-rev'),
browserSync = require('browser-sync'),
del = require('del'),
ngannotate = require('gulp-ng-annotate');
gulp.task('jshint', function() {
return gulp.src('app/scripts/**/*.js')
.pipe(jshint())
.pipe(jshint.reporter(stylish));
});
// Clean
gulp.task('clean', function() {
return del(['dist']);
});
// Default task
gulp.task('default', ['clean'], function() {
gulp.start('usemin', 'imagemin','copyfonts');
});
gulp.task('usemin',['jshint'], function () {
return gulp.src('./app/**/*.html')
.pipe(usemin({
css:[cleancss(),rev()],
js: [ngannotate(),uglify(),rev()]
}))
.pipe(gulp.dest('dist/'))
});
// Images
gulp.task('imagemin', function() {
return del(['dist/images']), gulp.src('app/images/**/*')
.pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
.pipe(gulp.dest('dist/images'))
.pipe(notify({ message: 'Images task complete' }));
});
gulp.task('copyfonts', ['clean'], function() {
gulp.src('./bower_components/font-awesome/fonts/**/*.{ttf,woff,eof,svg}*')
.pipe(gulp.dest('./dist/fonts'));
gulp.src('./bower_components/bootstrap/dist/fonts/**/*.{ttf,woff,eof,svg}*')
.pipe(gulp.dest('./dist/fonts'));
});
// Watch
gulp.task('watch', ['browser-sync'], function() {
// Watch .js files
gulp.watch('{app/scripts/**/*.js,app/styles/**/*.css,app/**/*.html}', ['usemin']);
// Watch image files
gulp.watch('app/images/**/*', ['imagemin']);
});
gulp.task('browser-sync', ['default'], function () {
var files = [
'app/**/*.html',
'app/styles/**/*.css',
'app/images/**/*.png',
'app/scripts/**/*.js',
'dist/**/*'
];
browserSync.init(files, {
server: {
baseDir: "dist",
index: "index.html"
}
});
// Watch any files in dist/, reload on change
gulp.watch(['dist/**']).on('change', browserSync.reload);
});
I am also not able to copy html files to my dist folder.
I keep on getting that error about using something different than ES5 standards while compiling, simply because I just started using TS and I don't know how to include the tsconfig.json directly in my Gulp task autocompile.
error TS1056: Accessors are only available when targeting ECMAScript 5 and higher
Is it possible to add my tsconfig.json file properties directly into my Gulp pipe?
Current gulpfile.js
'use strict';
var gulp = require('gulp');
var ts = require('gulp-typescript');
var tsProject = ts.createProject('tsconfig.json'); // TypeScript config
var merge = require('merge2'); // TypeScript requirement
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var useref = require('gulp-useref');
var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');
var cssnano = require('gulp-cssnano');
var imagemin = require('gulp-imagemin');
var cache = require('gulp-cache');
var del = require('del');
var runSequence = require('run-sequence');
gulp.task('sass', function () {
return gulp.src('app/assets/scss/**/*.scss')
.pipe(sass()) // Using gulp-sass
.pipe(gulp.dest('app/assets/css'))
.pipe(browserSync.reload({
stream: true
}));
});
gulp.task('typescript', function () {
var tsResult = gulp.src('app/assets/typescript/**/*.ts')
.pipe(ts({
declaration: true
}));
return merge([
tsResult.dts.pipe(gulp.dest('app/assets/definitions')),
tsResult.js.pipe(gulp.dest('app/assets/js'))
]);
});
gulp.task('watch', ['browserSync', 'sass'], function () {
gulp.watch('app/assets/typescript/**/*.ts', ['typescript']);
gulp.watch('app/assets/scss/**/*.scss', ['sass']);
// Reloads the browser whenever HTML or JS files change
gulp.watch('app/**/*.html', browserSync.reload);
gulp.watch('app/assets/js/**/*.js', browserSync.reload);
});
gulp.task('browserSync', function () {
browserSync.init({
server: {
baseDir: 'app'
},
});
});
gulp.task('useref', function () {
return gulp.src('app/*.html')
.pipe(useref())
.pipe(gulpIf('*.js', uglify()))
// Minifies only if it's a CSS file
.pipe(gulpIf('*.css', cssnano()))
.pipe(gulp.dest('dist'));
});
gulp.task('images', function () {
return gulp.src('app/assets/img/**/*.+(png|jpg|jpeg|gif|svg)')
// Caching images that ran through imagemin
.pipe(cache(imagemin({
interlaced: true
})))
.pipe(gulp.dest('dist/assets/img'));
});
gulp.task('fonts', function () {
return gulp.src('app/assets/fonts/**/*')
.pipe(gulp.dest('dist/assets/fonts'));
});
gulp.task('clean:dist', function () {
return del.sync('dist');
});
gulp.task('build', function (callback) {
runSequence('clean:dist', ['sass', 'useref', 'images', 'fonts'],
callback
);
});
gulp.task('default', function (callback) {
runSequence(['sass', 'typescript', 'browserSync', 'watch'],
callback
);
// Typescript compiler
});
I would recommend you to use your tsconfig.json as the only source of the properties. To do this change how you create tsResult:
var tsProject = ts.createProject('tsconfig.json');
var tsResult = tsProject.src().
.pipe(//....
Below is the complete task that works for me:
gulp.task('build.js.dev', () =>
{
var tsProject = ts.createProject('tsconfig.json');
var tsResult = tsProject.src()
.pipe(sourcemaps.init())
.pipe(tsProject());
return merge([
//Write definitions
//tsResult.dts.pipe(gulp.dest(TEMP_TARGET_FOLDER)),
//Write compiled js
tsResult.js.pipe(sourcemaps.write(
".",
{
includeContent: true,
sourceRoot: __dirname + "/dist"
})).pipe(gulp.dest(TEMP_TARGET_FOLDER))]);
});
The error you are getting is due to the fact that if you omit target compiler option the typescript compiler will fallback to ES3.
Gulp browser-sync is not reloading my browser. When I hit save on my project it builds everything fine. My browser blinks and says "Connected to Browser-sync" on the upper right hand corner. It does not load the changes though. When I manually hit refresh, on chrome, it will load the changes. I've been up and down the gulp file and can find nothing wrong. Any advice?
Gulp.js file:
var $ = require('gulp-load-plugins')();
var argv = require('yargs').argv;
var browser = require('browser-sync');
var gulp = require('gulp');
var panini = require('panini');
var rimraf = require('rimraf');
var sequence = require('run-sequence');
var sherpa = require('style-sherpa');
// Check for --production flag
var isProduction = !!(argv.production);
// Port to use for the development server.
var PORT = 8000;
// Browsers to target when prefixing CSS.
var COMPATIBILITY = ['last 2 versions', 'ie >= 9'];
// File paths to various assets are defined here.
var PATHS = {
assets: [
'src/assets/**/*',
'!src/assets/{img,js,scss}/**/*'
],
sass: [
'bower_components/foundation-sites/scss',
'bower_components/motion-ui/src/'
],
javascript: [
'bower_components/jquery/dist/jquery.js',
'bower_components/what-input/what-input.js',
'bower_components/foundation-sites/js/foundation.core.js',
'bower_components/foundation-sites/js/foundation.util.*.js',
// Paths to individual JS components defined below
'bower_components/foundation-sites/js/foundation.abide.js',
'bower_components/foundation-sites/js/foundation.accordion.js',
'bower_components/foundation-sites/js/foundation.accordionMenu.js',
'bower_components/foundation-sites/js/foundation.drilldown.js',
'bower_components/foundation-sites/js/foundation.dropdown.js',
'bower_components/foundation-sites/js/foundation.dropdownMenu.js',
'bower_components/foundation-sites/js/foundation.equalizer.js',
'bower_components/foundation-sites/js/foundation.interchange.js',
'bower_components/foundation-sites/js/foundation.magellan.js',
'bower_components/foundation-sites/js/foundation.offcanvas.js',
'bower_components/foundation-sites/js/foundation.orbit.js',
'bower_components/foundation-sites/js/foundation.responsiveMenu.js',
'bower_components/foundation-sites/js/foundation.responsiveToggle.js',
'bower_components/foundation-sites/js/foundation.reveal.js',
'bower_components/foundation-sites/js/foundation.slider.js',
'bower_components/foundation-sites/js/foundation.sticky.js',
'bower_components/foundation-sites/js/foundation.tabs.js',
'bower_components/foundation-sites/js/foundation.toggler.js',
'bower_components/foundation-sites/js/foundation.tooltip.js',
'src/assets/js/**/!(app).js',
'src/assets/js/app.js'
]
};
// Delete the "dist" folder
// This happens every time a build starts
gulp.task('clean', function(done) {
rimraf('dist', done);
});
// Browser Sync wrapper task
// allows for proper injection of css files
gulp.task('reload', function(cb) {
browser.reload();
cb();
});
// Copy files out of the assets folder
// This task skips over the "img", "js", and "scss" folders, which are parsed separately
gulp.task('copy', function() {
return gulp.src(PATHS.assets)
.pipe(gulp.dest('dist/assets'));
});
// Copy page templates into finished HTML files
gulp.task('pages', function() {
return gulp.src('src/pages/**/*.{html,hbs,handlebars}')
.pipe(panini({
root: 'src/pages/',
layouts: 'src/layouts/',
partials: 'src/partials/',
data: 'src/data/',
helpers: 'src/helpers/'
}))
.pipe(gulp.dest('dist'));
});
gulp.task('pages:reset', function(cb) {
panini.refresh();
gulp.run('pages', cb);
});
gulp.task('styleguide', function(cb) {
sherpa('src/styleguide/index.md', {
output: 'dist/styleguide.html',
template: 'src/styleguide/template.html'
}, cb);
});
// Compile Sass into CSS
// In production, the CSS is compressed
gulp.task('sass', function() {
var uncss = $.if(isProduction, $.uncss({
html: ['src/**/*.html'],
ignore: [
new RegExp('^meta\..*'),
new RegExp('^\.is-.*')
]
}));
var minifycss = $.if(isProduction, $.minifyCss());
return gulp.src('src/assets/scss/app.scss')
.pipe($.sourcemaps.init())
.pipe($.sass({
includePaths: PATHS.sass
})
.on('error', $.sass.logError))
.pipe($.autoprefixer({
browsers: COMPATIBILITY
}))
.pipe(uncss)
.pipe(minifycss)
.pipe($.if(!isProduction, $.sourcemaps.write()))
.pipe(gulp.dest('dist/assets/css'))
.pipe(browser.reload({stream: true}));
});
// Combine JavaScript into one file
// In production, the file is minified
gulp.task('javascript', function() {
var uglify = $.if(isProduction, $.uglify()
.on('error', function (e) {
console.log(e);
}));
return gulp.src(PATHS.javascript)
.pipe($.sourcemaps.init())
.pipe($.concat('app.js'))
.pipe(uglify)
.pipe($.if(!isProduction, $.sourcemaps.write()))
.pipe(gulp.dest('dist/assets/js'));
});
// Copy images to the "dist" folder
// In production, the images are compressed
gulp.task('images', function() {
var imagemin = $.if(isProduction, $.imagemin({
progressive: true
}));
return gulp.src('src/assets/img/**/*')
.pipe(imagemin)
.pipe(gulp.dest('dist/assets/img'));
});
// Build the "dist" folder by running all of the above tasks
gulp.task('build', function(done) {
sequence('clean', ['pages', 'sass', 'javascript', 'images', 'copy'], 'styleguide', done);
});
// Start a server with LiveReload to preview the site in
gulp.task('server', ['build'], function() {
browser.init({
server: 'dist', port: PORT
});
});
// Build the site, run the server, and watch for file changes
gulp.task('default', ['build', 'server'], function() {
gulp.watch(PATHS.assets, ['copy', 'reload']);
gulp.watch(['src/pages/**/*.html'], ['pages', 'reload']);
gulp.watch(['src/{layouts,partials}/**/*.html'], ['pages:reset', 'reload']);
gulp.watch(['src/assets/scss/**/*.scss'], ['sass']);
gulp.watch(['src/assets/js/**/*.js'], ['javascript', 'reload']);
gulp.watch(['src/assets/img/**/*'], ['images', 'reload']);
gulp.watch(['src/styleguide/**'], ['styleguide', 'reload']);
});
Thanks you - Adolfo
I was helped with the fix at zurb/foundation-sites on github by gakimball. There were issues with the gulp.js file for foundation 6.1.1. Github issue page: https://github.com/zurb/panini/issues/10#issuecomment-172692241 explains more. Replacing my gulp.js file with the following code fixed the issue.
New gulp.js:
var $ = require('gulp-load-plugins')();
var argv = require('yargs').argv;
var browser = require('browser-sync');
var gulp = require('gulp');
var panini = require('panini');
var rimraf = require('rimraf');
var sequence = require('run-sequence');
var sherpa = require('style-sherpa');
// Check for --production flag
var isProduction = !!(argv.production);
// Port to use for the development server.
var PORT = 8000;
// Browsers to target when prefixing CSS.
var COMPATIBILITY = ['last 2 versions', 'ie >= 9'];
// File paths to various assets are defined here.
var PATHS = {
assets: [
'src/assets/**/*',
'!src/assets/{img,js,scss}/**/*'
],
sass: [
'bower_components/foundation-sites/scss',
'bower_components/motion-ui/src/'
],
javascript: [
'bower_components/jquery/dist/jquery.js',
'bower_components/what-input/what-input.js',
'bower_components/foundation-sites/js/foundation.core.js',
'bower_components/foundation-sites/js/foundation.util.*.js',
// Paths to individual JS components defined below
'bower_components/foundation-sites/js/foundation.abide.js',
'bower_components/foundation-sites/js/foundation.accordion.js',
'bower_components/foundation-sites/js/foundation.accordionMenu.js',
'bower_components/foundation-sites/js/foundation.drilldown.js',
'bower_components/foundation-sites/js/foundation.dropdown.js',
'bower_components/foundation-sites/js/foundation.dropdownMenu.js',
'bower_components/foundation-sites/js/foundation.equalizer.js',
'bower_components/foundation-sites/js/foundation.interchange.js',
'bower_components/foundation-sites/js/foundation.magellan.js',
'bower_components/foundation-sites/js/foundation.offcanvas.js',
'bower_components/foundation-sites/js/foundation.orbit.js',
'bower_components/foundation-sites/js/foundation.responsiveMenu.js',
'bower_components/foundation-sites/js/foundation.responsiveToggle.js',
'bower_components/foundation-sites/js/foundation.reveal.js',
'bower_components/foundation-sites/js/foundation.slider.js',
'bower_components/foundation-sites/js/foundation.sticky.js',
'bower_components/foundation-sites/js/foundation.tabs.js',
'bower_components/foundation-sites/js/foundation.toggler.js',
'bower_components/foundation-sites/js/foundation.tooltip.js',
'src/assets/js/**/!(app).js',
'src/assets/js/app.js'
]
};
// Delete the "dist" folder
// This happens every time a build starts
gulp.task('clean', function(done) {
rimraf('dist', done);
});
// Copy files out of the assets folder
// This task skips over the "img", "js", and "scss" folders, which are parsed separately
gulp.task('copy', function() {
return gulp.src(PATHS.assets)
.pipe(gulp.dest('dist/assets'));
});
// Copy page templates into finished HTML files
gulp.task('pages', function() {
return gulp.src('src/pages/**/*.{html,hbs,handlebars}')
.pipe(panini({
root: 'src/pages/',
layouts: 'src/layouts/',
partials: 'src/partials/',
data: 'src/data/',
helpers: 'src/helpers/'
}))
.pipe(gulp.dest('dist'))
.on('finish', browser.reload);
});
gulp.task('pages:reset', function(done) {
panini.refresh();
gulp.run('pages');
done();
});
gulp.task('styleguide', function(done) {
sherpa('src/styleguide/index.md', {
output: 'dist/styleguide.html',
template: 'src/styleguide/template.html'
}, function() {
browser.reload;
done();
});
});
// Compile Sass into CSS
// In production, the CSS is compressed
gulp.task('sass', function() {
var uncss = $.if(isProduction, $.uncss({
html: ['src/**/*.html'],
ignore: [
new RegExp('^meta\..*'),
new RegExp('^\.is-.*')
]
}));
var minifycss = $.if(isProduction, $.minifyCss());
return gulp.src('src/assets/scss/app.scss')
.pipe($.sourcemaps.init())
.pipe($.sass({
includePaths: PATHS.sass
})
.on('error', $.sass.logError))
.pipe($.autoprefixer({
browsers: COMPATIBILITY
}))
.pipe(uncss)
.pipe(minifycss)
.pipe($.if(!isProduction, $.sourcemaps.write()))
.pipe(gulp.dest('dist/assets/css'))
.pipe(browser.reload({ stream: true }));
});
// Combine JavaScript into one file
// In production, the file is minified
gulp.task('javascript', function() {
var uglify = $.if(isProduction, $.uglify()
.on('error', function (e) {
console.log(e);
}));
return gulp.src(PATHS.javascript)
.pipe($.sourcemaps.init())
.pipe($.concat('app.js'))
.pipe(uglify)
.pipe($.if(!isProduction, $.sourcemaps.write()))
.pipe(gulp.dest('dist/assets/js'))
.on('finish', browser.reload);
});
// Copy images to the "dist" folder
// In production, the images are compressed
gulp.task('images', function() {
var imagemin = $.if(isProduction, $.imagemin({
progressive: true
}));
return gulp.src('src/assets/img/**/*')
.pipe(imagemin)
.pipe(gulp.dest('dist/assets/img'))
.on('finish', browser.reload);
});
// Build the "dist" folder by running all of the above tasks
gulp.task('build', function(done) {
sequence('clean', ['pages', 'sass', 'javascript', 'images', 'copy'], 'styleguide', done);
});
// Start a server with LiveReload to preview the site in
gulp.task('server', ['build'], function() {
browser.init({
server: 'dist', port: PORT
});
});
// Build the site, run the server, and watch for file changes
gulp.task('default', ['build', 'server'], function() {
gulp.watch(PATHS.assets, ['copy']);
gulp.watch(['src/pages/**/*'], ['pages']);
gulp.watch(['src/{layouts,partials,helpers,data}/**/*'], ['pages:reset']);
gulp.watch(['src/assets/scss/**/{*.scss, *.sass}'], ['sass']);
gulp.watch(['src/assets/js/**/*.js'], ['javascript']);
gulp.watch(['src/assets/img/**/*'], ['images']);
gulp.watch(['src/styleguide/**'], ['styleguide']);
});
Thanks to the code above browser-sync is working again - Thanks gakimball!
I have a hard time integrating jade with yeoman's gulp webapp generator.
The watch task is already working as expected but once I try to build the project I get the following error:
stream.js:94
throw er; // Unhandled stream error in pipe.
^
TypeError: path must be a string
I assume it is because I changed the html task to return gulp.src('.tmp/*.html') (it was 'app/*.html' originally, which runs without an error but of course ignores my jade templates).
My gulpfile:
'use strict';
// generated on 2014-04-17 using generator-gulp-webapp 0.0.7
var gulp = require('gulp'),
jade = require('gulp-jade');
// load plugins
var $ = require('gulp-load-plugins')();
gulp.task('styles', function () {
return gulp.src('app/styles/main.sass')
.pipe($.rubySass({
style: 'expanded',
compass: true,
loadPath: 'app/bower_components'
}))
.pipe($.autoprefixer('> 5%', 'last 3 versions', 'ff >= 20', 'ie 9'))
.pipe(gulp.dest('.tmp/styles'))
.pipe($.size());
});
gulp.task('templates', function() {
var YOUR_LOCALS = {};
return gulp.src('app/*.jade')
.pipe(jade({
locals: YOUR_LOCALS,
pretty: true
}))
.pipe(gulp.dest('.tmp'))
.pipe($.size());
});
gulp.task('scripts', function () {
return gulp.src('app/scripts/**/*.js')
.pipe($.jshint())
.pipe($.jshint.reporter($.jshintStylish))
.pipe($.size());
});
gulp.task('html', ['templates', 'styles', 'scripts'], function () {
var jsFilter = $.filter('**/*.js');
var cssFilter = $.filter('**/*.css');
return gulp.src('.tmp/*.html')
.pipe($.useref.assets())
.pipe(jsFilter)
.pipe($.uglify())
.pipe(jsFilter.restore())
.pipe(cssFilter)
.pipe($.csso())
.pipe(cssFilter.restore())
.pipe($.useref.restore())
.pipe($.useref())
.pipe(gulp.dest('dist'))
.pipe($.size());
});
gulp.task('images', function () {
return gulp.src('app/images/**/*')
.pipe($.cache($.imagemin({
optimizationLevel: 3,
progressive: true,
interlaced: true
})))
.pipe(gulp.dest('dist/images'))
.pipe($.size());
});
gulp.task('fonts', function () {
return $.bowerFiles()
.pipe($.filter('**/*.{eot,svg,ttf,woff}'))
.pipe($.flatten())
.pipe(gulp.dest('dist/styles/fonts'))
.pipe($.size());
});
gulp.task('clean', function () {
return gulp.src(['.tmp', 'dist'], { read: false }).pipe($.clean());
});
gulp.task('build', ['html', 'images', 'fonts']);
gulp.task('default', ['clean'], function () {
gulp.start('build');
});
gulp.task('connect', function () {
var connect = require('connect');
var app = connect()
.use(require('connect-livereload')({ port: 35729 }))
.use(connect.static('app'))
.use(connect.static('.tmp'))
.use(connect.directory('app'));
require('http').createServer(app)
.listen(9000)
.on('listening', function () {
console.log('Started connect web server on http://localhost:9000');
});
});
gulp.task('serve', ['connect', 'styles', 'templates'], function () {
require('opn')('http://localhost:9000');
});
// inject bower components
gulp.task('wiredep', function () {
var wiredep = require('wiredep').stream;
gulp.src('app/styles/*.sass')
.pipe(wiredep({
directory: 'app/bower_components'
}))
.pipe(gulp.dest('app/styles'));
gulp.src('app/*.html')
.pipe(wiredep({
directory: 'app/bower_components'
}))
.pipe(gulp.dest('app'));
});
gulp.task('watch', ['connect', 'serve'], function () {
var server = $.livereload();
// watch for changes
gulp.watch([
'app/*.html',
'app/**/*.jade',
'.tmp/styles/**/*.css',
'app/scripts/**/*.js',
'app/images/**/*'
]).on('change', function (file) {
server.changed(file.path);
});
gulp.watch('app/**/*.jade', ['templates']);
gulp.watch('app/styles/**/*.sass', ['styles']);
gulp.watch('app/scripts/**/*.js', ['scripts']);
gulp.watch('app/images/**/*', ['images']);
gulp.watch('bower.json', ['wiredep']);
});
Any suggestions?
Apparently the error came from gulp-useref having problems with my build blocks.
Changing all blocks to use {app,.tmp} as it's search path fixed the behaviour, e.g.:
// build:js({app,.tmp}) scripts/vendor/modernizr.js
script(src='bower_components/modernizr/modernizr.js')
// endbuild
I encountered the same problem.
To fix your wiredep task, add this after the gulp.src('app/*.html') block:
gulp.src('app/*.jade')
.pipe(wiredep({
directory: 'app/bower_components'
}))
.pipe(gulp.dest('app'));
This will update the // bower:js ... // endbower blocks in your .jade files when your bower.json changes, triggered by the watch:
gulp.watch('bower.json', ['wiredep']);
at the end of your gulpfile.
Eg.
When I add "jquery": "~1.11.0" as a dependencies in my bower.json (and save).
In my /app/layout.jade file, this:
body
// bower:js
// endbower
Gets replaced with:
body
// bower:js
script(src='bower_components/jquery/dist/jquery.js')
// endbower
If you want to use build:js without adding ({app,.tmp}) to all of your blocks, in your html task, add both app and .tmp to the source.
Your .js and .css are in the app directory, so when you changed the source to .tmp/*.html instead of app/*.html, your two $.filters didn't find any files.
To work around this, make the gulp.src() an array containing both paths.
Replace:
gulp.task('html', ['templates', 'styles', 'scripts'], function () {
var jsFilter = $.filter('**/*.js');
var cssFilter = $.filter('**/*.css');
return gulp.src('.tmp/*.html')
...
With:
gulp.task('html', ['templates', 'styles', 'scripts'], function () {
var jsFilter = $.filter('**/*.js');
var cssFilter = $.filter('**/*.css');
return gulp.src(['app/*.html', '.tmp/*.html'])
...