I'm working on project that move in new version, when launch sprite became messy and need to be given versioning to check the latest addition only, sprite used now only sprite.png and sprite-2x.png.
But when i generate with gulp css and gulp cssmin(gulp-minify-css), version in sprite imagePath(sprite.png?v4=.1) disappear (in style.css just sprite.png without ?v=4.1).
This is my sprite config too create sprite.png
// Sprites
var gulp = require('gulp'),
config = require('../config').sprite,
spritesmith = require('gulp.spritesmith'),
gulpif = require('gulp-if'),
merge = require('merge-stream');
gulp.task('sprite', function() {
// Normal
var sprite = gulp.src(config.image + '/icons/*.png')
.pipe(spritesmith({
imgName: 'sprite.png',
imgPath: '../img/sprite.png?v=4.1',
cssName: '_helper.spritemap.scss'
}))
.pipe(gulpif('*.png', gulp.dest(config.image),
gulp.dest(config.sass)));
// Retina
var sprite2x = gulp.src(config.image + '/icons-2x/*.png')
.pipe(spritesmith({
imgName: 'sprite-2x.png',
imgPath: '../img/sprite-2x.png?v=4.1',
cssName: '_helper.spritemap-2x.scss',
cssVarMap: function(sprite) {
sprite.name = sprite.name + '-2x';
}
}))
.pipe(gulpif('*.png', gulp.dest(config.image),
gulp.dest(config.sass)));
Result in spritemap scss:
$icon-kustom-white-name: 'icon-kustom-white';
$icon-kustom-white-x: 449px;
$icon-kustom-white-y: 265px;
$icon-kustom-white-offset-x: -449px;
$icon-kustom-white-offset-y: -265px;
$icon-kustom-white-width: 18px;
$icon-kustom-white-height: 21px;
$icon-kustom-white-total-width: 493px;
$icon-kustom-white-total-height: 483px;
$icon-kustom-white-image: '../img/sprite.png?v=4.1';
$icon-kustom-white: (449px, 265px, -449px, -265px, 18px, 21px, 493px,
483px, '../img/sprite.png?v=4.1', 'icon-kustom-white', );
In Style.css
//Style.css
.example {
background-image: url(../img/sprite.png); // Version missing (?v=4.1)
}
This is gulp css config
// CSS task (compile SASS, autoprefixing, and combine media queries)
var gulp = require('gulp'),
config = require('../config').sass,
plumber = require('gulp-plumber'),
changed = require('gulp-changed'),
sass = require('gulp-sass'),
postcss = require('gulp-postcss'),
autoprefixer = require('gulp-autoprefixer'),
mqpacker = require('css-mqpacker'),
browserSync = require('browser-sync'),
minifyCSS = require('gulp-minify-css');
// filever = require('gulp-version-filename');
gulp.task('css', function() {
return gulp.src(config.src)
.pipe(plumber({
errorHandler: function(err) { console.log(err); this.emit('end') }
}))
.pipe(changed(config.dest, { extension: '.css' }))
.pipe(sass({
imagePath: '../img',
sourceComments: true,
outputStyle: 'expanded'
}))
.pipe(postcss([ autoprefixer, mqpacker({sort: true}) ]))
.pipe(gulp.dest(config.dest))
.pipe(browserSync.reload({stream:true}));
});
gulp.task('cssmin', function() {
return gulp.src(config.src)
.pipe(plumber({
errorHandler: function(err) { console.log(err); this.emit('end') }
}))
.pipe(sass({
imagePath: '../img'
}))
.pipe(postcss([ autoprefixer, mqpacker({sort: true}) ]))
.pipe(minifyCSS())
.pipe(gulp.dest(config.dest));
});
Why is it lost?
Is there any other way?
You can easily do it with:
unix-timestamp: https://www.npmjs.com/package/unix-timestamp
gulp-md5: https://www.npmjs.com/package/gulp-md5
Related
I have the following folder structure:
theme
assets
build
css
style.css
src
theme
buttons.scss
style.scss
components
hero
hero.html
hero.scss
index.html
Any changes in src theme and any scss file for a component (i.e. hero.scss) should all compile into style.css.
My theme files compile correctly, but my component scss files don't appear in style.css.
Instead, when I run gulp css, a separate css file appears under the build folder, i.e.
build
css
style.css
hero.css
How can I get it to compile everything into style.css?
gulpfile.js
const assetsSRC = 'assets/src/',
assetsDST = 'assets/build/',
components = 'components/';
const gulp = require('gulp'),
sass = require('gulp-sass')(require('sass')),
sourcemaps = require('gulp-sourcemaps'),
fs = require('fs'),
path = require('path'),
merge = require('merge-stream'),
postcss = require('gulp-postcss'),
autoprefixer = require('gulp-autoprefixer'),
plumber = require('gulp-plumber'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
strip = require('gulp-strip-comments');
const componentCSS = components + '**/*.scss',
componentJS = components + '**/*.js',
globalCSS = assetsSRC + 'scss/style.scss';
configCSS = assetsSRC + 'scss/config/**.scss';
themeCSS = assetsSRC + 'scss/theme/**.scss';
globalJS = assetsSRC + 'js/*.js';
libJS = assetsSRC + 'js/lib/*.js';
var sassOptions = {
errLogToConsole: true,
outputStyle: 'compressed'
};
function getFolders(dir) {
return fs.readdirSync(dir).filter(function(file) {
return fs.statSync(path.join(dir, file)).isDirectory();
});
}
function css() {
var folders = getFolders(components);
var tasks = folders.map(function(folder) {
var src = path.join(components, folder);
var dst = path.join(assetsDST + 'css');
return gulp.src(path.join(src, '/**/*.scss'))
.pipe(sourcemaps.init())
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(autoprefixer('last 2 versions'))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(dst));
});
return merge(tasks);
}
function mainCSS() {
var dst = path.join(assetsDST + 'css/');
return gulp.src(globalCSS, { allowEmpty: true })
.pipe(sourcemaps.init())
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(autoprefixer('last 2 versions'))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(dst));
}
function libraryJS() {
var dst = path.join(assetsDST + 'JS/lib');
return gulp.src(libJS).pipe(gulp.dest(dst));
}
function watch() {
gulp.watch([globalCSS,configCSS,themeCSS, componentCSS],mainCSS);
}
exports.mainCSS = mainCSS;
exports.mainJS = mainJS;
exports.libraryJS = libraryJS;
exports.css = css;
exports.javascript = javascript;
exports.watch = watch;
const build = gulp.series(watch);
gulp.task('default', build);
Edit
Attempt using gulp-sass-glob:
function css() {
gulp.task('styles', function () {
var src = path(components);
return gulp
.src(src, '/**/*.scss')
.pipe(sassGlob())
.pipe(sourcemaps.init())
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(autoprefixer('last 2 versions'))
.pipe(sourcemaps.write('.'))
.pipe(sass())
.pipe(gulp.dest(assetsDST + 'css'));
});
}
Re-ran gulp watch (no errors). Made a change and saved hero.scss. Then went into style.css to find css that has been compiled from hero.scss - nothing shows. scss not compiled into style.css
Edit 2
I have the following:
function css() {
var folders = getFolders(components);
var tasks = folders.map(function(folder) {
var src = path.join(components, folder);
var dst = path.join(assetsDST + 'css/');
return gulp.src(path.join(src, '**/*.scss'))
.pipe(sourcemaps.init())
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(autoprefixer('last 2 versions'))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(dst));
});
return merge(tasks);
}
This is creating individual css files (rather than collating into style.css). I think this one is close, but unsure how to proceed.
Have you tried gulp-sass-glob?
https://www.npmjs.com/package/gulp-sass-glob
I am trying to use gulp-file-include for include some common sections like header or footer from /src/includes folder into any .html pages in a project tree along with BrowserSync to refresh changes.
When I use gulp command from command line it's compiling all files into /dist folder without problems (I hope). But after, if I change anything from /src/index.html it doesn't reflect changes to browser or write changes into /dist/index.html.
I can't figure out exactly where the problem is. You can see the project from this Git repo and here is my gulpfile.js content:
var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
var plumber = require('gulp-plumber');
var gutil = require('gulp-util');
var concat = require('gulp-concat');
var cleanCSS = require('gulp-clean-css');
var rename = require("gulp-rename");
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');
var browserSync = require('browser-sync').create();
var sourcemaps = require("gulp-sourcemaps");
var fileinclude = require("gulp-file-include");
// File Paths
var CSS_PATH = { src: "./src/sass/*.scss", dist: "./dist/css/"};
var JS_PATH = { src: "./src/js/*.js", dist: "./dist/js/"};
var HTML_PATH = { src: "./src/*.html", dist: "./dist/html/*.html"};
var INCLUDES_PATH = "./src/includes/**/*.html";
var JQUERY_PATH = "node_modules/jquery/dist/jquery.min.js";
// Error Handling
var gulp_src = gulp.src;
gulp.src = function() {
return gulp_src.apply(gulp, arguments)
.pipe(plumber(function(error) {
// Output an error message
gutil.log(gutil.colors.red('Error (' + error.plugin + '): ' + error.message));
// emit the end event, to properly end the task
this.emit('end');
})
);
};
// Styles
gulp.task('styles', function() {
return gulp.src(CSS_PATH["src"])
.pipe(sass())
.pipe(autoprefixer('last 2 versions'))
.pipe(sourcemaps.init())
.pipe(gulp.dest(CSS_PATH["dist"]))
.pipe(cleanCSS())
.pipe(sourcemaps.write())
.pipe(concat("main.css", {newLine: ""}))
.pipe(gulp.dest(CSS_PATH["dist"]))
.pipe(browserSync.reload({ stream: true }))
});
// Scripts
gulp.task('scripts', function() {
return gulp.src([JS_PATH["src"], JQUERY_PATH])
.pipe(uglify())
.pipe(concat('main.min.js'))
.pipe(gulp.dest(JS_PATH["dist"]));
});
// File Include
gulp.task('fileinclude', function() {
return gulp.src(HTML_PATH["src"])
.pipe(fileinclude({
prefix: '##',
basepath: 'src/includes'
}))
.pipe(gulp.dest('dist'));
});
// BrowserSync
gulp.task('browserSync', function() {
browserSync.init({
server: {
baseDir: 'dist/'
},
open: false,
browser: "Google Chrome",
notify: true,
notify: {
styles: {
top: 'auto',
bottom: '0',
borderRadius: '4px 0 0 0',
opacity: .9
}
},
snippetOptions: {
rule: {
match: /<\/body>/i,
fn: function (snippet, match) {
return snippet + match;
}
}
}
})
})
// Watch task
gulp.task('watch', ['fileinclude', 'browserSync'], function() {
gulp.watch(CSS_PATH["src"], ['styles']);
gulp.watch(JS_PATH["src"], ['scripts']);
gulp.watch(INCLUDES_PATH, ['fileinclude']);
gulp.watch([HTML_PATH["src"], HTML_PATH["src"]], browserSync.reload);
});
gulp.task('default', ['fileinclude', 'styles', 'scripts', 'browserSync', 'watch' ]);
I seem to have it working. I added the following to the end of the 'scripts' and 'fileinclude' tasks:
.pipe(browserSync.reload({ stream: true }))
// File Include
gulp.task('fileinclude', function() {
return gulp.src(HTML_PATH.src)
.pipe(fileinclude({
prefix: '##',
basepath: 'src/includes'
}))
.pipe(gulp.dest('dist'))
.pipe(browserSync.reload({ stream: true }))
});
// Scripts
gulp.task('scripts', function() {
// return gulp.src([JS_PATH["src"], JQUERY_PATH])
return gulp.src(JS_PATH.src)
.pipe(uglify())
.pipe(concat('main.min.js'))
.pipe(gulp.dest(JS_PATH.dist))
.pipe(browserSync.reload({ stream: true }))
});
so that the browser is reloaded after any changes to those two groups. I changed the 'watch' task to:
// Watch task
// gulp.task('watch', ['fileinclude', 'browserSync'], function() {
// 'browserSync' is already running from 'default' task so remove it from above
// 'fileinclude' is called below only where it is needed, not for changes to js/scss files
gulp.task('watch', function() {
gulp.watch(CSS_PATH.src, ['styles']);
gulp.watch(JS_PATH.src, ['scripts']);
gulp.watch(INCLUDES_PATH, ['fileinclude']);
// gulp.watch([HTML_PATH["src"], HTML_PATH["src"]], browserSync.reload);
// the above looks for changes to the source and immediately reloads,
// before any changes are made to the dist/html
// Watch for changes in the html src and run 'fileinclude'
// browserSync reload moved to end of 'fileinclude'
gulp.watch([HTML_PATH.src], ['fileinclude']);
});
Edit: to handle the subsequent question about gulp failing to watch new files, I have made some changes to my original answer. But you should really be using gulp4.0 now IMO. Gulp3.9.x relied on a library that was problematic in watching for new, deleted or renamed files.
You will need two more plugins:
var watch = require("gulp-watch");
var runSequence = require("run-sequence");
The gulp-watch plugin is better at watching for new, etc. files, but doesn't take 'tasks' as arguments but instead it takes functions as arguments so that is why I used run-sequence. [You could rewrite your tasks as regular functions - but then you might as well shift to gulp4.0].
Then use this 'watch' task:
gulp.task('watch', function () {
watch(CSS_PATH.src, function () {
runSequence('styles');
});
watch(JS_PATH.src, function () {
runSequence('scripts');
});
watch(INCLUDES_PATH, function () {
runSequence('fileinclude');
});
watch([HTML_PATH.src], function () {
runSequence('fileinclude');
});
});
My gulp setup with browsersync seems to have a problem with detecting changes for SCSS files. It works perfectly fine for SLIM with reload and detection. There's no error with the gulp. The only problem is the browsersync fail to detect changes in SCSS file and reload or inject changes.
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
slim = require('gulp-slim'),
autoprefix = require('gulp-autoprefixer'),
notify = require('gulp-notify'),
bower = require('gulp-bower'),
image = require('gulp-image'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
browserSync = require('browser-sync').create();
var config = {
sassPath: './source/sass',
slimPath: './source/slim',
bowerDir: './bower_components',
jsPath: './source/js'
}
gulp.task('bower', function() {
return bower()
.pipe(gulp.dest(config.bowerDir))
});
gulp.task('js', function() {
return gulp.src('./source/js/**/*.js')
.pipe(concat('script.js'))
.pipe(gulp.dest('./dist/js'));
});
gulp.task('icons', function() {
return gulp.src(config.bowerDir + '/font-awesome/fonts/**.*')
.pipe(gulp.dest('./dist/fonts'));
});
gulp.task('image', function () {
gulp.src('./source/images/*')
.pipe(image())
.pipe(gulp.dest('./dist/images'));
} );
gulp.task('css', function() {
return sass('./source/scss/**/*.scss', {
style: 'compressed',
loadPath: [
'./source/scss',
config.bowerDir + '/bootstrap/scss',
config.bowerDir + '/font-awesome/scss',
]
}).on("error", notify.onError(function (error) {
return "Error: " + error.message;
}))
.pipe(gulp.dest('./dist/css'))
.pipe(browserSync.stream());
});
gulp.task('html', function() {
gulp.src('./source/slim/**/*.slim')
.pipe(slim({
pretty: true
}))
.pipe(gulp.dest('./dist/'));
});
gulp.task('serve', ['css', 'html', 'js'], function() {
browserSync.init({
injectChanges: true,
server: "./dist"
});
gulp.watch(config.sassPath + '/**/*.scss', ['css']);
gulp.watch(config.slimPath + '/**/*.slim', ['html']).on('change', browserSync.reload);;
});
gulp.task('default', ['bower','js', 'icons', 'css', 'html', 'image', 'serve']);
gulp.task('build',['bower', 'js', 'icons', 'css', 'html', 'image'] );
This might not be the answer you are looking for but its the work around that I've been using since I ran into a similar issue using browserSync.stream() not firing off consistently.
'use strict';
var gulp = require('gulp'),
browserSync = require('browser-sync').create();
gulp.task('serve',function(){
browserSync.init({
server: {
baseDir: './dev/'
},
files: ['./dev/**/*.html',
'./dev/css/**/*.css',
'./dev/js/**/*.js',
'./dev/img/**/*.*'],
notify: false
});
});
As you can see, this uses browserSyncs own watch task as opposed to piping it through the entire build process, which can have its own advantages by making the serve task easily abstracted and pulled into another project.
Hope this helps.
I got this Gulp file where I'm running various tasks.
I would like to delete the contents of my build directory before running any other tasks but can't work out how to do this.
I've tried lots of various ways I found when searching for a solution to this but can't get it to work.
Here is my Gulp file:
// List required plugins
var gulp = require('gulp'),
del = require('del'),
uglify = require('gulp-uglify'),
postcss = require('gulp-postcss'),
lost = require('lost'),
nano = require('gulp-cssnano'),
sourcemaps = require('gulp-sourcemaps'),
autoprefixer = require('autoprefixer'),
mqpacker = require('css-mqpacker'),
mixins = require('postcss-mixins'), // Must go before other plugins in the PostCSS task
nested = require('postcss-nested'),
vars = require('postcss-simple-vars'),
partials = require('postcss-import'),
plumber = require('gulp-plumber'),
gutil = require('gulp-util'),
imagemin = require('gulp-imagemin'),
pngquant = require('imagemin-pngquant'),
browserSync = require('browser-sync').create();
// Config - Paths and other config
var src = {
cssDir: 'src/css/**/*.css',
jsDir: 'src/js/**/*.js',
imgDir: 'src/img/*',
svgDir: 'src/img/svg/**/*.svg',
htmlDir: 'src/**/*.html',
srcDir: 'src/',
},
build = {
buildDir: 'build/',
cssDir: 'build/assets/css/',
htmlDir: 'build/**/*.html',
jsDir: 'build/assets/js/',
imgDir: 'build/assets/img/',
},
options = {
autoprefix: { browsers: ['last 2 versions'] },
imagemin: { optimizationLevel: 7, progressive: true, interlaced: true, svgoPlugins: [ {removeViewBox: false}, {cleanupIDs: false} ], use: [pngquant()] },
port: '80',
};
// Error handling function
// Thanks to https://cameronspear.com/blog/how-to-handle-gulp-watch-errors-with-plumber/
var onError = function(err) {
gutil.beep();
console.log(err);
this.emit('end');
}
// Clean task
gulp.task('clean:build', function () {
return del([
build.buildDir,
]);
});
// Copy HTML to Build
gulp.task('html', function () {
return gulp.src(src.htmlDir)
.pipe(plumber({
errorHandler: onError
}))
.pipe(gulp.dest(build.buildDir))
.pipe(browserSync.stream());
});
// BrowserSync Server + watching files for changes
gulp.task('server', function() {
browserSync.init({
server: {
baseDir: build.buildDir
},
port: options.port,
});
});
// PostCSS Task
gulp.task('css', function () {
var processors = [
partials(),
lost(),
autoprefixer({ browsers: ['last 2 version'] }),
mixins(),
nested(),
vars(),
mqpacker(), // Make sure mqpacker is last!
];
return gulp.src(src.cssDir)
.pipe(plumber({
errorHandler: onError
}))
.pipe(sourcemaps.init())
.pipe(postcss(processors))
//.pipe(nano()) - Disable minification during development
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(build.cssDir))
.pipe(browserSync.stream());
});
// JS Task
gulp.task('compressJS', function() {
return gulp.src(src.jsDir)
.pipe(plumber({
errorHandler: onError
}))
.pipe(uglify())
.pipe(gulp.dest(build.jsDir))
.pipe(browserSync.stream());
});
// Image Task
gulp.task('imagemin', function() {
return gulp.src(src.imgDir)
.pipe(plumber({
errorHandler: onError
}))
.pipe(imagemin(
options.imagemin
))
.pipe(gulp.dest(build.imgDir))
.pipe(browserSync.stream());
});
gulp.task('watch', function () {
gulp.watch(src.cssDir, ['css']);
gulp.watch(src.jsDir, ['compressJS']);
gulp.watch(src.htmlDir, ['html']);
gulp.watch(src.imgDir, ['imagemin']);
});
gulp.task('default', ['html', 'imagemin', 'compressJS', 'server', 'watch']);
How should I do to run the task clean:build before any other tasks but only run it once. Or is there a better way of cleaning out files before running a build?
Thanks!!
Have your tasks depend on your clean task:
gulp.task('html', ['clean:build'], function() { ... })
this is how i do it.
var del = require('del') ;
gulp.task('delete-build-folder', function(cb) {
return del([config.buildDir], cb);
});
gulp.task('default', ['delete-build-folder'], function() {
console.log('building.....');
gulp.start('copy-html', 'copy-html-views');
});
I'm trying to rebuild only files that change in my gulpfile.js by using this recipe via the gulp-watch plugin. The problem is when I run my default task gulp, it doesn't watch the files at all after saving any of the files I want it to watch. What am I doing wrong here in my gulpfile.js? Thanks in advance.
/* ----------------------------------------------------- */
/* Gulpfile.js
/* ----------------------------------------------------- */
'use strict';
// Setup modules/Gulp plugins
var gulp = require('gulp'),
del = require('del'),
runSequence = require('run-sequence'),
less = require('gulp-less'),
// minifyCSS = require('gulp-minify-css'),
fileinclude = require('gulp-file-include'),
order = require('gulp-order'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
sourcemaps = require('gulp-sourcemaps'),
imagemin = require('gulp-imagemin'),
pngquant = require('imagemin-pngquant'),
plumber = require('gulp-plumber'),
watch = require('gulp-watch'),
// browserify = require('browserify'),
// sourceStream = require('vinyl-source-stream'),
connect = require('gulp-connect');
// Configure file paths
var path = {
DEST: 'dist/',
SRC: 'src/',
INCLUDES: 'include/',
LESS_SRC: 'src/frontend/less/',
LESS_MANIFEST: 'src/frontend/less/all.less',
CSS_DEST: 'dist/frontend/css/',
JS_SRC: 'src/frontend/js/',
JS_MINIFIED_OUT: 'all.js',
JS_DEST: 'dist/frontend/js',
IMG_SRC: 'src/frontend/img/',
IMG_DEST: 'dist/frontend/img/',
};
// Clean out build folder each time Gulp runs
gulp.task('clean', function (cb) {
del([
path.DEST
], cb);
});
// Compile LESS
gulp.task('less', function(){
return gulp.src(path.LESS_MANIFEST)
.pipe(watch(path.LESS_MANIFEST))
.pipe(plumber({
handleError: function (err) {
console.log(err);
this.emit('end');
}
}))
.pipe(sourcemaps.init())
.pipe(less())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(path.CSS_DEST))
.pipe(connect.reload());
});
// Allow HTML files to be included
gulp.task('html', function() {
return gulp.src([path.SRC + '*.html'])
.pipe(watch(path.SRC + '*.html'))
.pipe(plumber({
handleError: function (err) {
console.log(err);
this.emit('end');
}
}))
.pipe(fileinclude({
prefix: '##',
basepath: path.INCLUDES
}))
.pipe(gulp.dest(path.DEST))
.pipe(connect.reload());
});
// Concatenate and minify JavaScript
gulp.task('js', function() {
return gulp.src(path.JS_SRC + '**/*.js')
.pipe(watch(path.JS_SRC + '**/*.js'))
.pipe(order([
path.JS_SRC + 'framework/*.js',
path.JS_SRC + 'vendor/*.js',
path.JS_SRC + 'client/*.js'
], {base: '.'} ))
.pipe(concat(path.JS_MINIFIED_OUT))
.pipe(uglify())
.pipe(gulp.dest(path.JS_DEST))
.pipe(connect.reload());
});
// Minify images
gulp.task('imagemin', function () {
return gulp.src(path.IMG_SRC + '**/*')
.pipe(imagemin({
progressive: true,
use: [pngquant()]
}))
.pipe(gulp.dest(path.IMG_DEST));
});
// Copy folders
gulp.task('copy', function() {
gulp.src(path.SRC + 'extjs/**/*')
.pipe(gulp.dest(path.DEST + 'extjs/'));
// Copy all Bower components to build folder
gulp.src('bower_components/**/*')
.pipe(gulp.dest('dist/bower_components/'));
});
// Connect to a server and livereload pages
gulp.task('connect', function() {
connect.server({
root: path.DEST,
livereload: true
});
});
// Organize build tasks into one task
gulp.task('build', ['less', 'html', 'js', 'imagemin', 'copy']);
// Organize server tasks into one task
gulp.task('server', ['connect']);
// Default task
gulp.task('default', function(cb) {
// Clean out dist/ folder before everything else
runSequence('clean', ['build', 'server'],
cb);
});
Try and remove the watch from your build tasks, and have separate tasks that handle the watching. Something like:
gulp.task("watch-less", function() {
watch(path.LESS_MANIFEST, function () {
gulp.start("less");
));
});
That way, it'll just trigger the task when a file changes. And the task for watching is able to be run separate from your build (which will also make your life easier if you use some form of build automation).
Also, you can specify many watch tasks, like so:
gulp.task("watch", function() {
watch(paths.FOO, function() {
gulp.start("foo");
});
watch(paths.BAR, function() {
gulp.start("bar");
});
});