I'm trying to set up a gulp task which scans my development folder for any new or changed files, and then copies them to my local server with the same folder structure. And it should also do this every time I edit or change a file.
I seem to have something that kinda works, but it's extremely slow up to the point where I don't know if it actually works at all. (The notification message doesn't show up at all after 30+ minutes)
Could someone point in the right direction on how to set this up correctly?
// Server folder
var projectWWW = 'C:/wamp64/www/myproject';
// Files to be copied (everything excluding scss files)
var copySRC = ['./**/*', '!./**/*.{scss}'];
// Require gulp & plugins
var gulp = require('gulp');
var newer = require('gulp-newer');
var notify = require('gulp-notify');
// Copy files task
gulp.task( 'copyFiles', function() {
gulp.src( copySRC )
.pipe( newer( projectWWW ) )
.pipe( gulp.dest( projectWWW ) )
.pipe( notify( { message: 'TASK: "copyFiles" Completed!', onLast: true } ) );
});
// Watch tasks
gulp.task( 'default', ['copyFiles'], function () {
gulp.watch( copySRC, [ 'copyFiles' ] ); // Copy on file changes.
});
i ran the same code on my local for a test app and it works.
var copySRC = ['./**/*', '!./node_modules/**'];
Related
Here I have a watch task that will create my build directory according to my src. My build directory will contain two main sub directories named debug and release. Watch task will look inside of my src directory(my working directory) and will transfer appropriate format of files inside the src into both release and debug directories. Now I also have a webserver task using gulp-webserver(live reloading) package in order to watching my index.html file inside my debug directory. My problem is that each task works independently, but I don't know how run them simultaneously. Here is what I've tried but it didn't work(just one of them will be start). Let me know if further information is needed.
// watch
gulp.task('watch',()=>{
gulp.watch(pathJS,gulp.series('js','js-min'));
gulp.watch(pathSCSS,gulp.series('sass','sass-min'));
gulp.watch(['src/**/*.*','!'+pathJS,'!'+pathSCSS],gulp.series('cp','cp-min'));
});
// webserver
gulp.task('webserver',()=>{
gulp.src(buildOptions.debugPath)
.pipe(webServer({
fallback: 'index.html',
port:'4000',
livereload:true,
open:true
}))
});
.
.
.
var default_tasks = ['build', 'webserver', 'watch'];
gulp.task('default',gulp.series('clean',...default_tasks));
EDIT:
Here is my full gulpfile.js:
const gulp = require('gulp');
const uglify = require('gulp-uglify-es').default;
const sass = require('gulp-sass');
const del = require('del');
const webServer = require('gulp-webserver');
//-------------------------------------------------------------------------------------------------
const build_tasks=['js','js-min','sass','sass-min','cp','cp-min'];
const buildOptions={
releasePath:'build/release/',
debugPath:'build/debug/',
};
const pathJS = 'src/js/**/*.js'
const pathSCSS = 'src/style/**/*.scss'
//-------------------------------------------------------------------------------------------------
// JavaScript Task
gulp.task('js',()=>{
return gulp.src([pathJS])
.pipe(gulp.dest(buildOptions.debugPath+'/js/'));
});
gulp.task('js-min',()=>{
return gulp.src([pathJS])
.pipe(uglify().on('error',uglify=>console.error(uglify.message)))
.pipe(gulp.dest(buildOptions.releasePath+'/js/'));
})
// sass Task
gulp.task('sass',()=>{
return gulp.src([pathSCSS])
.pipe(sass().on('error',sass.logError))
.pipe(gulp.dest(buildOptions.debugPath+'/style/'));
});
gulp.task('sass-min',()=>{
return gulp.src([pathSCSS])
.pipe(sass({outputStyle: 'compressed'}).on('error',sass.logError))
.pipe(gulp.dest(buildOptions.releasePath+'/style/'))
})
// copy files
gulp.task('cp',()=>{
return gulp.src(['src/**/*.*','!'+pathJS,'!'+pathSCSS])
.pipe(gulp.dest(buildOptions.debugPath));
});
gulp.task('cp-min',()=>{
return gulp.src(['src/**/*.*','!'+pathJS,'!'+pathSCSS])
.pipe(gulp.dest(buildOptions.releasePath));
});
// watch
gulp.task('watch',()=>{
gulp.watch(pathJS,gulp.series('js','js-min'));
gulp.watch(pathSCSS,gulp.series('sass','sass-min'));
gulp.watch(['src/**/*.*','!'+pathJS,'!'+pathSCSS],gulp.series('cp','cp-min'));
});
// webserver
gulp.task('webserver',()=>{
gulp.src(buildOptions.debugPath)
.pipe(webServer({
fallback: 'index.html',
port:'4000',
livereload:true,
open:true
}))
});
//-------------------------------------------------------------------------------------------------
gulp.task('clean',function(){return del(['build']);});
gulp.task('build',gulp.parallel(...build_tasks));
//-------------------------------------------------------------------------------------------------
function build(){
var default_tasks = ['build', 'webserver', 'watch'];
//var default_tasks = ['build', 'watch'];
gulp.task('default',gulp.series('clean',...default_tasks));
}
build();
I solve my problem by using gulp.parallel for both webserver and watch tasks :
// watch
gulp.task('watch',()=>{
gulp.watch(pathJS,gulp.series('js','js-min'));
gulp.watch(pathSCSS,gulp.series('sass','sass-min'));
gulp.watch(['src/**/*.*','!'+pathJS,'!'+pathSCSS],gulp.series('cp','cp-min'));
});
// webserver
gulp.task('webserver',()=>{
gulp.src(buildOptions.debugPath)
.pipe(webServer({
fallback: 'index.html',
port:'4000',
livereload:true,
open:true
}))
});
.
.
.
gulp.task('default',gulp.series('clean','build',gulp.parallel('webserver', 'watch')));//Here is my change!
I'm working to copy a file style.scss from specific directory to multiple folders that start with skin-.
In fact, i don't know how to tell gulp to choose folders that start with this string skin-.
Here is my gulp code:
// Copy Files
gulp.task( "copyFiles" , function() {
return gulp.src( "app/scss/style.scss" )
.pipe( gulp.dest( "app/scss/skins/skin-*" ) );
});
At command prompt, it says that the task is running but with no result.
I have searched a lot around for that, but i didn't find a method. I found this question here which near to my question context, but it didn't help! Gulp copy single file (src pipe dest) with wildcarded directory
Modifying only slightly #davidmdem's answer at saving to multiple destinations:
const gulp = require("gulp");
const glob = require("glob");
const destinationFolders = glob.sync("app/scss/skins/skin-*");
gulp.task('copyFiles', function () {
var stream = gulp.src("app/scss/style.scss");
destinationFolders.forEach(function (skinFolder) {
stream = stream.pipe(gulp.dest(skinFolder));
});
return stream;
});
You cannot put a glob into gulp.dest as you are trying in your question.
I'm having issues using gulp-assemble with gulp-watch. I want gulp to watch the entire assemble source directory (data, includes, layouts and pages) and recompile the site when ever a file changes.
I'm able to get this working correctly for pages, but gulp is not recompiling the site when changes are made to the data, includes or layouts files.
I've added a watch task to the example gulpfile.js in the gulp-assemble repository:
var gulp = require('gulp');
var htmlmin = require('gulp-htmlmin');
var extname = require('gulp-extname');
var assemble = require('assemble');
var middleware = require('./examples/middleware');
var gulpAssemble = require('./');
// setup items on the assemble object
assemble.data({site: {title: 'Blog'}});
assemble.data(['test/fixtures/data/*.{json,yml}']);
assemble.layouts(['test/fixtures/layouts/*.hbs']);
assemble.partials(['test/fixtures/includes/*.hbs']);
// arbitrary middleware that runs when files loaded
assemble.onLoad(/index\.hbs/, middleware(assemble));
// render templates in `test/fixtures`
gulp.task('default', function () {
gulp.src('test/fixtures/pages/*.hbs')
.pipe(gulpAssemble(assemble, { layout: 'default' }))
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(extname())
.pipe(gulp.dest('_gh_pages/'));
});
// ============================================================
// my watch task
// ============================================================
gulp.task('watch', ['default'], function() {
gulp.watch('test/fixtures/**/*.{hbs,yml,json}', ['default']);
});
If I run gulp watch and save a change to any of the .hbs files in the pages directory, I see gulp trigger the default in my terminal output, and I see the .html file in _gh_pages update with the change.
However, if I save a change to any of the .hbs, .json, or .yml files in the data, includes or layouts directories, I see gulp trigger the default in my terminal output, but I see no changes to the _gh_pages .html file(s). I have to run the gulp default task manually in order to get the changes applied to the _gh_pages files.
What do I need to change in order to get the desired behaviour?
gulp-watch will only execute code inside the function for the default task, so to get things like data and layouts to reload, you'll need to move those pieces of code to inside the function (Just before gulp.src).
var gulp = require('gulp');
var htmlmin = require('gulp-htmlmin');
var extname = require('gulp-extname');
var assemble = require('assemble');
var middleware = require('./examples/middleware');
var gulpAssemble = require('./');
// arbitrary middleware that runs when files loaded
assemble.onLoad(/index\.hbs/, middleware(assemble));
// render templates in `test/fixtures`
gulp.task('default', function () {
// setup items on the assemble object
assemble.data({site: {title: 'Blog'}});
assemble.data(['test/fixtures/data/*.{json,yml}']);
assemble.layouts(['test/fixtures/layouts/*.hbs']);
assemble.partials(['test/fixtures/includes/*.hbs']);
gulp.src('test/fixtures/pages/*.hbs')
.pipe(gulpAssemble(assemble, { layout: 'default' }))
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(extname())
.pipe(gulp.dest('_gh_pages/'));
});
// ============================================================
// my watch task
// ============================================================
gulp.task('watch', ['default'], function() {
gulp.watch('test/fixtures/**/*.{hbs,yml,json}', ['default']);
});
I have two tasks in my Gulp file:
default Uses LESS to merge a bunch of files together with comments and sourcemapping.
prepare Grabs the CSS file generated by #1 and cleans / compresses it.
I've told Gulp that task #2 requires task #1.
When I run task #2, the files are created for task #1, but the files that should be created for task #2 are not. If I run task #2 again, then the files for task #2 are created.
I'm thinking there's some sort of cache Gulp is using, and since the files didn't exist when Gulp first ran, it isn't finding them and therefore not doing anything with them.
I've tried searching around to no avail. Any thoughts or suggestions would be great!
var gulp = require('gulp'),
less = require('gulp-less'),
csso = require('gulp-csso');
gulp.task( 'default', ['styles-dev'], function() {} );
gulp.task( 'prepare', ['minify-css'], function() {} )
gulp.task('styles-dev', function() {
gulp
.src("source/styles/global*.less")
.pipe( less({
sourceMap: true
}) )
.pipe( gulp.dest("build/local/styles") )
});
gulp.task('minify-css', ['styles-dev'], function() {
gulp.src('build/local/styles/*.css')
.pipe(csso())
.pipe(gulp.dest('build/pre/styles'))
});
gulp.task('styles-dev', function() {
return gulp
.src("source/styles/global*.less")
.pipe( less({
sourceMap: true
}) )
.pipe( gulp.dest("build/local/styles") )
});
Looks like I need to return the stream as a "hint" that the task is finished. It's amazing how asking a question will help you find the answer...
var gulp = require('gulp'),
less = require('gulp-less'),
csso = require('gulp-csso');
gulp.task( 'default', ['css']);
gulp.task('css', function() {
return gulp.src("source/styles/global*.less")
.pipe( less({
sourceMap: true
}) )
.pipe(gulp.dest("build/local/styles"))
.pipe(csso())
.pipe(gulp.dest('build/pre/styles'));
});
My gulp file is not emitting any errors on either standard gulp methods like gulp.src() with non existant paths nor are stream errors being called by their handler. I've included a simple file that silently fails, printing only the starting.. and finished.. default messages.
var //
gulp = require( "gulp" ),
gulpUtil = require( "gulp-util" ),
sass = require( "gulp-ruby-sass");
gulp.task( "default", function() {
gulp.src( "path-that-does-not-exist.scss" )
.pipe( sass() )
.on( "error", function( err ) {
console.log( "this should print" );
})
.pipe( gulp.dest( "./client-side/public/compiled" ) );
});
Okay, so Gulp is working "correctly." But what I'm hearing in your question is that it would be nice if Gulp could just tell you if a file doesn't exist.
I use gulp-expect-file as such
var coffee = require('gulp-coffee');
var expect = require('gulp-expect-file');
gulp.task('mytask', function() {
var files = ['idontexist.html'];
return gulp.src(files)
.pipe(expect(files))
.pipe(coffee());
});
Now you'll see this in the terminal:
If the path does not exist, gulp.src successfully pushes exactly nothing through the pipe, the sass and dest tasks successfully are never called, and with that, gulp.src's stream ends, signaling the default task is complete, and gulp exits. It has done exactly what you've told it to. :D
I agree with #adamjgrant use gulp-expect-file.
var expect = require('gulp-expect-file'),
gulp = require('gulp');
gulp.task('task', function() {
var files = ['src/js/*.js'];
gulp
.src(files)
.pipe(expect(files));
});
PS: Grunt.js handles this with nonull:true
lint: {
src: ['gruntfile.js', 'gulpfile.js'],
nonull: true
}