the task can't be called by watch module. - gulp

It's very weird. The 'htmltemplates' task is working, but the 'html-templates' task is not working. I tried many things.
When I executed the gulp command, it worked. but the task wan't called by watch module.
Why? Help me...
var gulp = require('gulp'),
// usemin = require('gulp-usemin'),
wrap = require('gulp-wrap'),
connect = require('gulp-connect'),
watch = require('gulp-watch'),
// minifyCss = require('gulp-minify-css'),
minifyJs = require('gulp-uglify'),
concat = require('gulp-concat'),
less = require('gulp-less'),
rename = require('gulp-rename'),
html2js = require('gulp-html2js');
// minifyHTML = require('gulp-minify-html');
var paths = {
theme_scripts: '../admin/assets/theme-js/**/*.*',
scripts: '../admin/assets/js/**/*.*',
styles: '../admin/assets/css/**/*.*',
images: '../admin/assets/img/**/*.*',
htmltemplates: '../admin/assets/templates/**/*.html',
html_templates: '../admin/app/**/*.html',
app_js: '../admin/app/**/*.js',
index: '../admin/index.html',
less: '../admin/assets/less/*.less',
bower_fonts: 'src/components/**/*.{ttf,eot,woff,eof,svg}'
};
/**
* Handle bower components from index
*/
gulp.task('usemin', function() {
return gulp.src(paths.index)
// .pipe(usemin({
// js: [minifyJs(), 'concat'],
// css: [minifyCss({keepSpecialComments: 0}), 'concat'],
// }))
.pipe(gulp.dest('../src/main/webapp/'));
});
/**
* Copy assets
*/
gulp.task('build-assets', ['copy-bower_fonts']);
gulp.task('copy-bower_fonts', function() {
return gulp.src(paths.bower_fonts)
.pipe(rename({
dirname: '/fonts'
}))
.pipe(gulp.dest('../src/main/webapp'));
});
/**
* Handle custom files
*/
gulp.task('build-custom', ['html-template','copy-components', 'custom-images', 'app-js','custom-js', 'theme-js', 'lib-less' ,'custom-less', 'custom-templates']);
gulp.task('copy-components', function() {
return gulp.src('../admin/assets/components/**/*.*')
.pipe(gulp.dest('../src/main/webapp/components'));
});
gulp.task('custom-images', function() {
return gulp.src(paths.images)
.pipe(gulp.dest('../src/main/webapp/img'));
});
gulp.task('app-js', function() {
return gulp.src(paths.app_js)
//.pipe(minifyJs())
.pipe(concat('st-openpms.concat.js'))
.pipe(gulp.dest('../src/main/webapp/js'));
});
gulp.task('theme-js', function() {
return gulp.src(paths.theme_scripts)
//.pipe(minifyJs())
.pipe(concat('dashboard.min.js'))
.pipe(gulp.dest('../src/main/webapp/js'));
});
gulp.task('custom-js', function() {
return gulp.src(paths.scripts)
// .pipe(minifyJs())
// .pipe(concat('openpms.concat.js'))
.pipe(gulp.dest('../src/main/webapp/js'));
});
gulp.task('custom-less', function() {
return gulp.src(paths.less)
.pipe(less())
.pipe(gulp.dest('../src/main/webapp/css'));
});
gulp.task('lib-less', function() {
return gulp.src(paths.less)
.pipe(less())
.pipe(gulp.dest('../src/main/webapp/css'));
});
gulp.task('custom-templates', function() {
return gulp.src(paths.htmltemplates)
// .pipe(minifyHTML())
.pipe(gulp.dest('../src/main/webapp/templates'));
});
gulp.task('html-template', function(url) {
gulp.src(paths.html_templates)
.pipe(html2js(
{
base : '../admin/app/',
outputModuleName: 'RedCA',
useStrict: true
}
))
.pipe(concat('openpms-st-test.templates.js'))
.pipe(gulp.dest('../src/main/webapp'))
})
/**
* Watch custom files
*/
gulp.task('watch', function() {
gulp.watch([paths.html_templates], ['html-template']);
gulp.watch([paths.images], ['custom-images']);
gulp.watch([paths.styles], ['custom-less']);
gulp.watch([paths.scripts], ['custom-js']);
gulp.watch([paths.theme_scripts], ['theme-js']);
gulp.watch([paths.htmltemplates], ['custom-templates']);
gulp.watch([paths.index], ['usemin']);
gulp.watch([paths.app_js], ['app-js']);
});
/**
* Live reload server
*/
gulp.task('webserver', function() {
connect.server({
root: '../src/main/webapp/',
livereload: true,
port: 5555
});
});
gulp.task('livereload', function() {
// gulp.src(['../src/main/webapp/**/*.*'])
// .pipe(watch())
// .pipe(connect.reload());
});
/**
* Gulp tasks
*/
gulp.task('build', ['usemin', 'build-assets', 'build-custom']);
gulp.task('default', ['build', 'webserver', 'livereload', 'watch']);

Related

gulp-file-include and BrowserSync Doesn't Reflect the Changes to Browser

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');
});
});

gulp-sequence not working

I have implementing gulp task in the project.
I have installed gulp-assests-version-replace to make version control file of css file.
Now I want to run above task after creating the app.css. It runs before creating the app.css, so version control file cannot be created.
Below is the gulp-file for running the gulp tasks.
var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
var changed = require('gulp-changed');
var concat = require('gulp-concat');
var del = require('del');
var gulpif = require('gulp-if');
var gutil = require('gulp-util');
var imagemin = require('gulp-imagemin');
var jshint = require('gulp-jshint');
var notify = require('gulp-notify');
var plumber = require('gulp-plumber');
var rename = require('gulp-rename');
var sass = require('gulp-sass');
var assetsVersionReplace = require('gulp-assets-version-replace');
var uglify = require('gulp-uglify');
var path = {
assets: 'skin/frontend/custom_theme/default/'
};
var config = {
tasks: {
css: {
autoprefixerOptions: {
// For "browserslist" see "package.json"
cascade: false,
supports: false // See: https://github.com/filamentgroup/select-css/issues/17
},
dest: path.assets + 'css/build',
sassOptions: {
outputStyle: 'compressed'
},
src: path.assets + 'css/src/**/*.scss'
},
version: {
autoprefixerOptions: {
// For "browserslist" see "package.json"
cascade: false,
supports: false // See: https://github.com/filamentgroup/select-css/issues/17
},
dest: path.assets + 'css/build',
sassOptions: {
outputStyle: 'compressed'
},
src: path.assets + 'css/build/app.css'
}
}
}
gulp.task('default', ['clean'], function () {
gulp.start('css');
gulp.start('assetsVersionReplace');
});
gulp.task('clean', function () {
return del([
path.assets + 'css/build',
path.assets + 'js/build',
path.assets + 'js/min',
path.assets + 'img/build'
]);
});
gulp.task('css', function () {
return gulp.src(config.tasks.css.src)
.pipe(plumber({
errorHandler: reportError
}))
.pipe(sass(config.tasks.css.sassOptions))
.pipe(autoprefixer(config.tasks.css.autoprefixerOptions))
.pipe(gulp.dest(config.tasks.css.dest));
});
gulp.task('assetsVersionReplace', function () {
return gulp.src(config.tasks.version.src)
.pipe(assetsVersionReplace({
replaceTemplateList: [
'app/design/frotend/custom_theme/default/template/page/head.phtml'
]
}))
.pipe(gulp.dest(config.tasks.version.dest))
});
gulp.task('watch', function () {
// Run "default" immediately
gulp.start('default');
// CSS
gulp.watch(config.tasks.css.src, ['css']);
gulp.watch(config.tasks.version.src, ['assetsVersionReplace']);
});
How can I run assetsVersionReplace task after creating the css (or after runnung 'CSS' task)?
Either change
gulp.task('assetsVersionReplace', function () {
to
gulp.task('assetsVersionReplace', ['css'], function () {
or, if that isn't an option, add a helper task
gulp.task('assetsVersionReplaceAfterCss', ['css'], function () {
gulp.start('assetsVersionReplace');
}
and use that instead
Why don't you use gulp series.
gulp.task('default',
gulp.series(
'css',
'assetsVersionReplace'
)
);

the broswer cannot reload when files updates using gulp and browser-sync

I have total followed the instructions of https://browsersync.io/docs/gulp
my gulpfile.js code:
let gulp = require('gulp');
let sass = require('gulp-sass');
let browserSync = require('browser-sync').create();
let reload = browserSync.reload;
gulp.task('server', ['css'], function() {
browserSync.init({
server: {
baseDir: './dist'
}
});
gulp.watch('src/sass/*.scss', ['css']);
gulp.watch("dist/*.html").on('change', reload);
gulp.watch("dist/sass/*.css").on('change', reload);
});
// 编译Sass
gulp.task('css', function() { // 任务名
return gulp.src('src/sass/a.scss') // 目标 sass 文件
.pipe(sass()) // sass -> css
.pipe(gulp.dest('dist/sass/')) // 目标目录
// .pipe(reload({stream: true}))
.pipe(browserSync.stream());
});
gulp.task('default', ['server']);
when I update the sass file, it seems that the css file will be updated immediately, but the broswer cannot reload.
and the command line show:
It seem that the cli cannot connect to the broswer?
===
The problem is solved,my html file does not have a body tag,see https://github.com/BrowserSync/browser-sync/issues/392#issuecomment-245380582
I post you my GULP FILE ... as you can see i use the
gulp-webserver
it only need to put reload:true to work as you aspect:
"use strict";
var gulp = require("gulp"),
concat = require("gulp-concat"),
cssmin = require("gulp-cssmin"),
htmlmin = require("gulp-htmlmin"),
uglify = require("gulp-uglify"),
merge = require("merge-stream"),
del = require("del"),
bundleconfig = require("./bundleconfig.json"); // make sure bundleconfig.json doesn't contain any comments
var livereload = require('gulp-livereload');
var changed = require('gulp-changed');
var stripDebug = require('gulp-strip-debug');
var minifyHTML = require('gulp-minify-html');
var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
var rename = require('gulp-rename');
var jshint = require('gulp-jshint');
var shell = require('gulp-shell');
var sass = require('gulp-sass');
var preprocess = require('gulp-preprocess');
var ngAnnotate = require('gulp-ng-annotate');
var templateCache = require('gulp-angular-templatecache');
var webserver = require('gulp-webserver'); //<-- YOU HAVE TO INSTALL IT MAYBE WITH NPM (npm install --save -dev gulp-webserver)
// THESE IS THE TASK FOR WEB SERVER AND RELOAD
gulp.task('webserver', function () {
gulp.src('')
.pipe(webserver({
host: 'localhost', // <-- IF YOU PUT YOUR IP .. YOU CAN WATCH IT FROM OTHER devices
port: 80,
livereload: true,
directoryListing: true,
open: true,
fallback: 'index-dev.html'
}));
});
// Task to process Index page with different include ile based on enviroment
gulp.task('html-dev', function () {
return gulp.src('Index.html')
.pipe(preprocess({ context: { NODE_ENV: 'dev', DEBUG: true } })) //To set environment variables in-line
.pipe(rename({ suffix: '-dev' }))
.pipe(gulp.dest(''));
});
// Task to process Index page with different include ile based on enviroment
gulp.task('html-prod', function () {
return gulp.src('Index.html')
.pipe(preprocess({ context: { NODE_ENV: 'prod', DEBUG: false } })) //To set environment variables in-line
.pipe(rename({ suffix: '-prod' }))
.pipe(gulp.dest(''));
});
// CSS concat, auto-prefix, minify, then rename output file
gulp.task('minify-css', function () {
var cssPath = { cssSrc: ['./app/view/assets/content/css/styles-default.css', './app/view/assets/content/css/styles-theme-1.css', './app/view/assets/content/css/styles-theme-2.css', '!*.min.css', '!/**/*.min.css'], cssDest: './app_build/content_build/css' };
return gulp.src(cssPath.cssSrc)
// .pipe(shell(['attrib C:/_goocity/Goocity/Goocity.Web/app_build/content_build/css/*.css -r']))
// .pipe(concat('styles.css'))
.pipe(autoprefix('last 2 versions'))
.pipe(minifyCSS())
.pipe(rename({ suffix: '.min' }))
.pipe(gulp.dest(cssPath.cssDest));
});
// Lint Task
gulp.task('lint', function () {
var jsPath = { jsSrc: ['./app/app.js', './app/controller/*.js', './app/view/utils/directives/*.js', './app/model/services/*.js'] };
return gulp.src(jsPath.jsSrc)
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
//SASS task
gulp.task('sass', function () {
var sassPath = {
cssSrc: ['./app/view/assets/content/css/*.scss'], cssDest: './app/view/assets/content/css'
};
gulp.src(sassPath.cssSrc)
.pipe(shell(['attrib C:/_goocity/Goocity/Goocity.Web/app/view/assets/content/css/*.css -r']))
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest(sassPath.cssDest))
.pipe(livereload());
});
gulp.task('cache', function () {
return gulp.src('./app/view/template/**/*.html')
.pipe(templateCache('templates.js', { module: 'Goocity', root: '/app/view/template' }))
.pipe(gulp.dest('./app/view/template'))
.pipe(livereload());
});
gulp.task('cache-directives', function () {
return gulp.src('./app/view/utils/directives/template/**/*.html')
.pipe(templateCache('templates.js', { module: 'Goocity', root: '/app/view/utils/directives/template' }))
.pipe(gulp.dest('./app/view/utils/directives/template'))
.pipe(livereload());
});
gulp.task("min:js", function () {
var tasks = getBundles(".js").map(function (bundle) {
return gulp.src(bundle.inputFiles, { base: "." })
.pipe(ngAnnotate({
remove: true,
add: true,
single_quotes: false
}))
.pipe(concat(bundle.outputFileName))
.pipe(uglify())
.pipe(gulp.dest("."));
});
return merge(tasks);
});
//gulp.task("min:css", function () {
// var tasks = getBundles(".css").map(function (bundle) {
// return gulp.src(bundle.inputFiles, { base: "." })
// .pipe(concat(bundle.outputFileName))
// .pipe(cssmin())
// .pipe(gulp.dest("."));
// });
// return merge(tasks);
//});
gulp.task("min:html", function () {
var tasks = getBundles(".html").map(function (bundle) {
return gulp.src(bundle.inputFiles, { base: "." })
.pipe(concat(bundle.outputFileName))
.pipe(htmlmin({ collapseWhitespace: true, minifyCSS: true, minifyJS: true }))
.pipe(gulp.dest("."));
//.pipe(livereload());
});
return merge(tasks);
});
gulp.task("clean", function () {
var files = bundleconfig.map(function (bundle) {
return bundle.outputFileName;
});
return del(files);
});
gulp.task("min", ["clean", "min:js", "minify-css", 'html-dev', "cache", "cache-directives"]);
gulp.task("default", ["watch", "webserver"]);
gulp.task("watch", function () {
livereload.listen();
// watch for JS error
gulp.watch(['./app/app.js', './app/controllers/*.js', './app/directives/*.js', './app/services/*.js'], ['lint']);
// min js
getBundles(".js").forEach(function (bundle) {
gulp.watch(bundle.inputFiles, ["min:js"]);
});
//watch for SASS changes
gulp.watch('./app/view/assets/content/css/scss/*.scss', ['sass']);
gulp.watch('./app/view/assets/content/css/scss/settings/*.scss', ['sass']);
gulp.watch('./app/view/assets/lib/bower/lumx/dist/scss/base/*.scss', ['sass']);
gulp.watch('./app/view/assets/lib/bower/lumx/dist/scss/modules/*.scss', ['sass']);
gulp.watch('./app/view/assets/content/css/*.scss', ['sass']);
gulp.watch('./app/view/assets/content/css/Hover-master/scss/*.scss', ['sass']);
//gulp.watch('./app/view/assets/content/css/*.css', ['minify-css']);
//watch for PREPROCCESS x PROD
gulp.watch('Index.html', ['html-prod']);
//watch for PREPROCCESS x DEV
gulp.watch('Index.html', ['html-dev']);
//watch for TEMPLATE CACHE
gulp.watch('./app/view/template/**/*.html', ['cache']);
gulp.watch('./app/view/utils/directives/template/**/*.html', ['cache-directives']);
});
function getBundles(extension) {
return bundleconfig.filter(function (bundle) {
return new RegExp(extension).test(bundle.outputFileName);
});
}
The problem is solved,my html file does not have a body tag,see https://github.com/BrowserSync/browser-sync/issues/392#issuecomment-245380582

Gulp not watching files with gulp-watch plugin

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");
});
});

How to make the task be done synchronously in gulp?

It's my gulp script.
I am using without any problem.
But I changed the configuration. and I got error when I run this.
'merge-copy-components' task doesn't work. For making it work, I have to execute the previous task. But I think the task doesn't execute and finish but works simultaneously with later one.
How can I solve this? I want to two tasks synchronously.
var gulp = require('gulp'),
//usemin = require('gulp-usemin'),
wrap = require('gulp-wrap'),
connect = require('gulp-connect'),
watch = require('gulp-watch'),
//minifyCss = require('gulp-minify-css'),
minifyJs = require('gulp-uglify'),
concat = require('gulp-concat'),
less = require('gulp-less'),
rename = require('gulp-rename'),
html2js = require('gulp-html2js');
//minifyHTML = require('gulp-minify-html');
var clean = require('gulp-clean');
var paths = {
index: '../admin/index.html',
///theme_scripts: '../admin/assets/theme-js/**/*.*',
scripts: '../admin/assets/js/**/*.*',
styles: '../admin/assets/css/**/*.*',
images: '../admin/assets/img/**/*.*',
less: '../admin/assets/less/*.less',
html_templates: '../admin/app/**/*.tpl.html',
app_data: '../admin/app/**/*.json',
app_js: '../admin/app/**/*.js',
// app_js_ordered: [ '/admin/app/app.module.js', '/admin/app/**/!(app.module).js'], // all files that end in .js EXCEPT foobar*.js
bower_fonts: 'src/components/**/*.{ttf,eot,woff,eof,svg}'
};
gulp.task('clean', function () {
return gulp.src('../src/main/webapp')
.pipe(clean({force: true}))
.pipe(clean());
});
/**
* Handle bower components from index
*/
gulp.task('usemin', function() {
return gulp.src(paths.index)
// .pipe(usemin({
// js: [minifyJs(), 'concat'],
// css: [minifyCss({keepSpecialComments: 0}), 'concat'],
// }))
.pipe(gulp.dest('../src/main/webapp/'));
});
/**
* Copy assets
*/
gulp.task('build-assets', ['copy-bower_fonts']);
gulp.task('copy-bower_fonts', function() {
return gulp.src(paths.bower_fonts)
.pipe(rename({
dirname: '/fonts'
}))
.pipe(gulp.dest('../src/main/webapp'));
});
/**
* Handle custom files
*/
gulp.task('build-custom', ['html-template', 'merge-copy-components' , 'custom-images', 'app-js','move-json-data','custom-js', /* 'theme-js',*/ 'lib-less' ,'custom-less','lib-css']);
gulp.task('merge-copy-components', function() {
// when it deploys, we have to filter must-necessary files
gulp.src('src/components/**/*.*')
.pipe(gulp.dest('../admin/assets/components'))
//copy-merge-components
return gulp.src('../admin/assets/components/**/*.*')
.pipe(gulp.dest('../src/main/webapp/components'));
});
gulp.task('custom-images', function() {
return gulp.src(paths.images)
.pipe(gulp.dest('../src/main/webapp/img'));
});
gulp.task('move-json-data', function() {
return gulp.src(paths.app_data)
.pipe(gulp.dest('../src/main/webapp/json'));
});
gulp.task('app-js', function() {
return gulp.src(paths.app_js)
//.pipe(minifyJs())
.pipe(concat('redca-ias.concat.js'))
.pipe(gulp.dest('../src/main/webapp/js'));
});
//gulp.task('theme-js', function() {
// return gulp.src(paths.theme_scripts)
// //.pipe(minifyJs())
// .pipe(concat('dashboard.min.js'))
// .pipe(gulp.dest('../src/main/webapp/js'));
//});
gulp.task('custom-js', function() {
return gulp.src(paths.scripts)
// .pipe(minifyJs())
// .pipe(concat('openpms.concat.js'))
.pipe(gulp.dest('../src/main/webapp/js'));
});
gulp.task('custom-less', function() {
return gulp.src(paths.less)
.pipe(less())
.pipe(gulp.dest('../src/main/webapp/css'));
});
gulp.task('lib-css', function() {
return gulp.src(paths.styles)
.pipe(gulp.dest('../src/main/webapp/css'));
});
gulp.task('lib-less', function() {
return gulp.src(paths.less)
.pipe(less())
.pipe(gulp.dest('../src/main/webapp/css'));
});
gulp.task('html-template', function() {
gulp.src(paths.html_templates)
.pipe(html2js(
{
base : '../admin/app/',
outputModuleName: 'RedCA',
useStrict: true
}
))
.pipe(concat('redca-ias.templates.js'))
.pipe(gulp.dest('../src/main/webapp/js'))
})
/*
gulp.task('inplace-app', function() {
return gulp.src('../src/main/webapp/js')
.pipe(gulp.dest('../build/inplaceWebapp/js'));
});
*/
/**
* Watch custom files
*/
gulp.task('watch', function() {
gulp.watch([paths.html_templates], ['html-template']);
gulp.watch([paths.images], ['custom-images']);
gulp.watch([paths.styles], ['custom-less']);
gulp.watch([paths.scripts], ['custom-js']);
///gulp.watch([paths.theme_scripts], ['theme-js']);
gulp.watch([paths.index], ['usemin']);
gulp.watch([paths.app_js], ['app-js']);
gulp.watch([paths.app_data], ['move-json-data']);
// for test
// gulp.watch(['../src/main/webapp/js'], ['inplace-app']);
});
/**
* Live reload server
*/
gulp.task('webserver', function() {
connect.server({
root: '../src/main/webapp/',
livereload: true,
port: 5555
});
});
gulp.task('livereload', function() {
// gulp.src(['../src/main/webapp/**/*.*'])
// .pipe(watch())
// .pipe(connect.reload());
});
/**
* Gulp tasks
*/
gulp.task('build', ['usemin', 'build-custom', 'build-assets', ]);
gulp.task('default', ['build', 'webserver', 'livereload', 'watch']);
Create task:
gulp.task('filet', function() {
gulp.src('src/components/**/*.*')
.pipe(gulp.dest('../admin/assets/components'));
});
Then add it to dependencies of your another task
gulp.task('merge-copy-components', ['filter'], function() {
...
This will make sure 'filter' task ends before 'merge-copy-components'.