I am trying to upload a folder via ftp using gulp and vinyl-ftp (https://www.npmjs.com/package/vinyl-ftp).
However, using the example configuration the task runs through but it does nothing.
There seems to be a log function, but i couldn't figure out if i get any logs. I only get the standart output from gulp:
[08:54:22] Using gulpfile gulpfile.js
[08:54:22] Starting 'deploy'...
[08:54:22] Finished 'deploy' after 13 ms
I just slightly modified the example configuration to fit my needs:
var gulp = require( 'gulp' );
var gutil = require( 'gulp-util' );
var ftp = require( 'vinyl-ftp' );
gulp.task( 'deploy', function() {
var conn = ftp.create( {
host: 'mywebsite.tld',
user: 'me',
password: 'mypass',
parallel: 10,
log: gutil.log
} );
var globs = [
'src/**',
'css/**',
'js/**',
'fonts/**',
'index.html'
];
return gulp.src( globs, { base: 'path_to_my_folder', buffer: false } )
.pipe( conn.newer( '/path_to_remote_folder' ) )
.pipe( conn.dest( '/path_to_remote_folder' ) );
} );
May i miss any dependency? I am running Yosemite.
Quick shot: I think the base attribute is misused here. base takes some part in your glob and ignores that for further file names. What you need is cwd:
return gulp.src( globs, { cwd: 'path_to_my_folder', buffer: false } )
.pipe( conn.newer( '/path_to_remote_folder' ) )
.pipe( conn.dest( '/path_to_remote_folder' ) );
});
Related
I'm currently building an html only website using VS Code. I get the following error intermittently when saving sass files. Using browersync, the browser updates with the changes, when it works. The error only happens sometimes but it's hindering my work.
gulp-notify: [Gulp - Error] Error: sass\style.scss
Error: File to import not found or unreadable: pages/global.
on line 2 of sass/style.scss
>> #import "pages/global";
I've installed the latest npm in the root of the website. I inherited the gulp file from a previous developer and it's worked fine in most cases.
// Defining requirements
var gulp = require( 'gulp' );
var sass = require( 'gulp-sass' );
var watch = require( 'gulp-watch' );
var rename = require( 'gulp-rename' );
var concat = require( 'gulp-concat' );
var uglify = require( 'gulp-uglify' );
var args = require( 'yargs' ).argv;
var browserSync = require( 'browser-sync' ).create();
var autoprefixer = require( 'gulp-autoprefixer' );
var cleanCSS = require( 'gulp-clean-css' );
var sourcemaps = require( 'gulp-sourcemaps' );
var notify = require( 'gulp-notify' );
var svgstore = require( 'gulp-svgstore' );
var cheerio = require( 'gulp-cheerio' );
var fs = require( 'fs' );
var gulpif = require( 'gulp-if' );
// Site Variables
var websiteURL = 'http://devsite.local.com';
// Get args object as a string
var getTask = JSON.stringify(args);
// If task is not production
if ( getTask.indexOf( 'production' ) !== -1 ) {
// Define "dev" variable
var dev = false;
} else {
var dev = true;
}
/**
* [handleErrors If Sass error]
* #return [Don't Kill Watch]
*/
function handleErrors(err) {
var args = Array.prototype.slice.call( arguments );
// Ignore "untitled folder ENOENT" error (Gulp Watch Issue)
if ( err.toString().indexOf('ENOENT') >= 0 ) {
// Keep gulp from hanging on this task
this.emit( 'end' );
} else {
// Send error to notification center with gulp-notify
notify.onError({
title: 'Gulp - Error',
message: 'Error: <%= error.message %>'
}).apply( this, args );
// Keep gulp from hanging on this task
this.emit( 'end' );
}
}
// BrowserSync
gulp.task( 'browserSync' , function () {
browserSync.init({
proxy: websiteURL,
https: websiteURL.includes('https'),
notify: false
});
// Reload PHP files
gulp.watch( '**/*.php' )
.on( 'error', handleErrors )
.on( 'change', browserSync.reload );
gulp.watch( '**/*.html' )
.on( 'error', handleErrors )
.on( 'change', browserSync.reload );
});
// Compiles SCSS files in CSS
gulp.task( 'sass', function() {
gulp.src( 'sass/**/*.scss' )
.pipe( sourcemaps.init() )
.pipe( sass().on( 'error', handleErrors ) )
.pipe( sourcemaps.write() )
.pipe( gulp.dest( './' ) )
.pipe( browserSync.stream() );
});
// Build CSS
gulp.task( 'buildcss', function() {
gulp.src( 'sass/**/*.scss' )
.pipe( sourcemaps.init() )
.pipe( sass().on( 'error', handleErrors ) )
.pipe(autoprefixer({
browsers: ['last 5 versions'],
cascade: false
}))
.pipe(cleanCSS(
{
compatibility: 'ie10',
level: 2
}
))
.pipe( sourcemaps.write() )
.pipe( gulp.dest( './' ) )
.pipe( browserSync.stream() );
});
// Clean CSS (Production only)
gulp.task('cleancss', function() {
return gulp.src('sass/**/*.scss') // much faster
.pipe( sass().on( 'error', handleErrors ) )
.pipe(autoprefixer({
browsers: ['last 5 versions'],
cascade: false
}))
.pipe(cleanCSS(
{
compatibility: 'ie10',
level: 2
}
))
.pipe(gulp.dest('./'));
});
// SVG Task
gulp.task( 'svgstore', function() {
return gulp.src(['svg/*.svg'])
.pipe( rename( { prefix: 'icon-' } ) )
.pipe( svgstore( { inlineSvg: true } ) )
.pipe( cheerio({
run: function( $ ) {
//$( '[fill]' ).removeAttr( 'fill' );
$( 'svg' ).attr( 'style', 'display:none' ).attr( 'width', '0' ).attr( 'height', '0' );
},
parserOptions: { xmlMode: true }
} ) )
.pipe( rename({
basename: 'svg-icons',
extname: '.php'
} ) )
.pipe( gulp.dest( './' ) );
});
// Uglifies and concat all JS files into one
gulp.task('scripts', function() {
var jsfiles = JSON.parse(fs.readFileSync('./js/scripts.json'));
var scripts = jsfiles.scripts;
return gulp.src(scripts)
.pipe( gulpif(dev, sourcemaps.init()) )
.pipe( concat('theme.min.js').on( 'error', handleErrors ) )
.pipe( uglify().on( 'error', handleErrors ) )
.pipe( gulpif(dev, sourcemaps.write()) )
.pipe( gulp.dest('./js/') )
.pipe( gulpif(dev, browserSync.stream()) );
});
// Build Task (Same as default but with css optimized)
gulp.task('build', ['browserSync'], function(){
gulp.watch('sass/**/*.scss', ['buildcss']).on( 'error', handleErrors );
gulp.watch(['svg/*.svg'], ['svgstore']).on( 'error', handleErrors );
gulp.watch(['js/src/*.js'], ['scripts']).on( 'error', handleErrors );
});
// Production Task
gulp.task('production', ['cleancss', 'scripts']);
// Watch Task
gulp.task('default', ['browserSync'], function(){
gulp.watch('sass/**/*.scss', ['sass']).on( 'error', handleErrors );
gulp.watch(['svg/*.svg'], ['svgstore']).on( 'error', handleErrors );
gulp.watch(['js/src/*.js'], ['scripts']).on( 'error', handleErrors );
gulp.watch(['js/scripts.json'], ['scripts']).on( 'error', handleErrors );
});
My sass files are stored in the /sass folder and it compiles to style.css in the root.
style.scss
/* Content */
#import "pages/global";
#import "pages/responsive";
This could be a permission issue. Try running permission according to your system.
I started to write library to fetch some data from an api in typescript and use webpack as a bundler.
We have a dev, test and prod api, so the lib should use differnt urls for each environment.
Webpack has the normalModuleReplacmentPlugin build in, to replace files, depending on the configuration. I created different environment files, which should be replaced by webpack.
I'm using Ubuntu 18.04, but one of our developer which is now working on the lib currently using windows. He noticed that the replacement is not working on his local machine.
webpack.config.js (example from my github repo)
const merge = require( 'webpack-merge' );
const path = require( 'path' );
const commonConfigObj = {
entry: {
'fooBar': './src/index.ts'
},
output: {
filename: '[name].js',
path: path.resolve( __dirname, 'dist' ),
library: 'FooBar',
libraryTarget: 'umd'
},
module: {
rules: [
{
test: /\.tsx?$/,
use: [
{
loader: 'ts-loader',
options: { configFile: 'tsconfig.json' }
}
]
}
]
},
resolve: {
extensions: [ '.ts', '.tsx', '.js' ]
},
profile: true
};
const commonConfig = merge( [ commonConfigObj ] );
const environments = {
'prod': require( './webpack/prod.config.js' ),
'dev': require( './webpack/dev.config.js' )
};
module.exports = mode=>{
if( mode ) {
const envConfig = environments[ mode.env ];
if( envConfig ) {
return merge( commonConfig, envConfig );
}
}
return merge( commonConfig, environments.dev );
};
webpack/prod.config.js (example from my github repo)
const CleanWebpackPlugin = require( 'clean-webpack-plugin' );
const BundleAnalyzerPlugin = require( 'webpack-bundle-analyzer' ).BundleAnalyzerPlugin;
const webpack = require('webpack');
module.exports = {
mode: 'production',
plugins: [
new CleanWebpackPlugin(),
new BundleAnalyzerPlugin( {
analyzerMode: 'disabled',
generateStatsFile: true
} ),
new webpack.NormalModuleReplacementPlugin(
/src\/environments\/environment.ts/,
'./environment.prod.ts'
),
],
devtool: 'source-map'
};
I'm sure that this is not a webpack issue but wrong usage.
GitHub repo: https://github.com/ManticSic/normalModuleReplacmentPlugin-issue-windows
Run npm ci and npm run build (or npm run build-dev for dev env).
You can find the important part at the end of line #1
expected: ...,t.environment={bar:"Prod"}...
result on windows: ...,t.environment={bar:"Normal"}...
Like expected the problem was sitting in front of the computer...
Wrong file system separators were used.
Replacing \/ with [\\\/] works fine!
Full regex: /src[\\\/]environments[\\\/]environment.ts/
I've been having a few issues trying to get Gulp working properly for a local Understrap Wordpress theme project I've been working on. I finally got it to a point where it will Start the "Watch" and "Default" processes, but then when I save my .scss files, I'm getting an error that says Error: task "sass" is not defined.
After that error, there are a number of other flags that mention sequencify, orchestrator, gulp-sequence, and thunks.
Below, I've included my gulpfile.js and the whole error code I'm receiving in terminal. I've been Googling for hours, and I can't seem to find a solution that fits into this scenario. I've tried rebuilding npm and uninstalling/reinstalling all my nodes, to no avail. Any help would be much appreciated!
My gulpfile.js
This is pretty much the standard file that comes with the Understrap theme.
// Defining requirements
var gulp = require( 'gulp' );
var plumber = require( 'gulp-plumber' );
var sass = require( 'gulp-sass' );
var watch = require( 'gulp-watch' );
var rename = require( 'gulp-rename' );
var concat = require( 'gulp-concat' );
var uglify = require( 'gulp-uglify' );
var imagemin = require( 'gulp-imagemin' );
var ignore = require( 'gulp-ignore' );
var rimraf = require( 'gulp-rimraf' );
var sourcemaps = require( 'gulp-sourcemaps' );
var browserSync = require( 'browser-sync' ).create();
var del = require( 'del' );
var cleanCSS = require( 'gulp-clean-css' );
var gulpSequence = require( 'gulp-sequence' );
var replace = require( 'gulp-replace' );
var autoprefixer = require( 'gulp-autoprefixer' );
// Configuration file to keep your code DRY
var cfg = require( './gulpconfig.json' );
var paths = cfg.paths;
// Load Gulp plugins from package dependencies
// var plugins = require('gulp-load-plugins')();
// Run:
// gulp sass
// Compiles SCSS files in CSS
gulp.task( 'sass', function() {
var stream = gulp.src( paths.sass + '/*.scss' )
.pipe( plumber( {
errorHandler: function( err ) {
console.log( err );
this.emit( 'end' );
}
} ) )
.pipe(sourcemaps.init({loadMaps: true}))
.pipe( sass( { errLogToConsole: true } ) )
.pipe( autoprefixer( 'last 2 versions' ) )
.pipe(sourcemaps.write(undefined, { sourceRoot: null }))
.pipe( gulp.dest( paths.css ) )
return stream;
});
// Run:
// gulp watch
// Starts watcher. Watcher runs gulp sass task on changes
gulp.task( 'watch', function() {
gulp.watch( paths.sass + '/**/*.scss', ['styles'] );
gulp.watch( [paths.dev + '/js/**/*.js', 'js/**/*.js', '!js/theme.js',
'!js/theme.min.js'], ['scripts'] );
//Inside the watch task.
gulp.watch( paths.imgsrc + '/**', ['imagemin-watch'] );
});
/**
* Ensures the 'imagemin' task is complete before reloading browsers
* #verbose
*/
gulp.task( 'imagemin-watch', ['imagemin'], function( ) {
browserSync.reload();
});
// Run:
// gulp imagemin
// Running image optimizing task
gulp.task( 'imagemin', function() {
gulp.src( paths.imgsrc + '/**' )
.pipe( imagemin() )
.pipe( gulp.dest( paths.img ) );
});
// Run:
// gulp cssnano
// Minifies CSS files
gulp.task( 'cssnano', function() {
return gulp.src( paths.css + '/theme.css' )
.pipe( sourcemaps.init( { loadMaps: true } ) )
.pipe( plumber( {
errorHandler: function( err ) {
console.log( err );
this.emit( 'end' );
}
} ) )
.pipe( rename( { suffix: '.min' } ) )
.pipe( cssnano( { discardComments: { removeAll: true } } ) )
.pipe( sourcemaps.write( './' ) )
.pipe( gulp.dest( paths.css ) );
});
gulp.task( 'minifycss', function() {
return gulp.src( paths.css + '/theme.css' )
.pipe( sourcemaps.init( { loadMaps: true } ) )
.pipe( cleanCSS( { compatibility: '*' } ) )
.pipe( plumber( {
errorHandler: function( err ) {
console.log( err ) ;
this.emit( 'end' );
}
} ) )
.pipe( rename( { suffix: '.min' } ) )
.pipe( sourcemaps.write( './' ) )
.pipe( gulp.dest( paths.css ) );
});
gulp.task( 'cleancss', function() {
return gulp.src( paths.css + '/*.min.css', { read: false } ) // Much faster
.pipe( ignore( 'theme.css' ) )
.pipe( rimraf() );
});
gulp.task( 'styles', function( callback ) {
gulpSequence( 'sass', 'minifycss' )( callback );
} );
// Run:
// gulp browser-sync
// Starts browser-sync task for starting the server.
gulp.task( 'browser-sync', function() {
browserSync.init( cfg.browserSyncWatchFiles, cfg.browserSyncOptions );
} );
// Run:
// gulp watch-bs
// Starts watcher with browser-sync. Browser-sync reloads page automatically on your browser
gulp.task( 'watch-bs', ['browser-sync', 'watch', 'scripts'], function() {
} );
// Run:
// gulp scripts.
// Uglifies and concat all JS files into one
gulp.task( 'scripts', function() {
var scripts = [
// Start - All BS4 stuff
paths.dev + '/js/bootstrap4/bootstrap.bundle.js',
// End - All BS4 stuff
paths.dev + '/js/skip-link-focus-fix.js',
// Adding currently empty javascript file to add on for your own themes´ customizations
// Please add any customizations to this .js file only!
paths.dev + '/js/custom-javascript.js'
];
gulp.src( scripts )
.pipe( concat( 'theme.min.js' ) )
.pipe( uglify() )
.pipe( gulp.dest( paths.js ) );
gulp.src( scripts )
.pipe( concat( 'theme.js' ) )
.pipe( gulp.dest( paths.js ) );
});
// Deleting any file inside the /src folder
gulp.task( 'clean-source', function() {
return del( ['src/**/*'] );
});
// Run:
// gulp copy-assets.
// Copy all needed dependency assets files from bower_component assets to themes /js, /scss and /fonts folder. Run this task after bower install or bower update
////////////////// All Bootstrap SASS Assets /////////////////////////
gulp.task( 'copy-assets', function() {
////////////////// All Bootstrap 4 Assets /////////////////////////
// Copy all JS files
var stream = gulp.src( paths.node + 'bootstrap/dist/js/**/*.js' )
.pipe( gulp.dest( paths.dev + '/js/bootstrap4' ) );
// Copy all Bootstrap SCSS files
gulp.src( paths.node + 'bootstrap/scss/**/*.scss' )
.pipe( gulp.dest( paths.dev + '/sass/bootstrap4' ) );
////////////////// End Bootstrap 4 Assets /////////////////////////
// Copy all Font Awesome Fonts
gulp.src( paths.node + 'font-awesome/fonts/**/*.{ttf,woff,woff2,eot,svg}' )
.pipe( gulp.dest( './fonts' ) );
// Copy all Font Awesome SCSS files
gulp.src( paths.node + 'font-awesome/scss/*.scss' )
.pipe( gulp.dest( paths.dev + '/sass/fontawesome' ) );
// _s SCSS files
gulp.src( paths.node + 'undescores-for-npm/sass/media/*.scss' )
.pipe( gulp.dest( paths.dev + '/sass/underscores' ) );
// _s JS files into /src/js
gulp.src( paths.node + 'undescores-for-npm/js/skip-link-focus-fix.js' )
.pipe( gulp.dest( paths.dev + '/js' ) );
});
// Deleting the files distributed by the copy-assets task
gulp.task( 'clean-vendor-assets', function() {
return del( [paths.dev + '/js/bootstrap4/**', paths.dev + '/sass/bootstrap4/**', './fonts/*wesome*.{ttf,woff,woff2,eot,svg}', paths.dev + '/sass/fontawesome/**', paths.dev + '/sass/underscores/**', paths.dev + '/js/skip-link-focus-fix.js', paths.js + '/**/skip-link-focus-fix.js', paths.js + '/**/popper.min.js', paths.js + '/**/popper.js', ( paths.vendor !== ''?( paths.js + paths.vendor + '/**' ):'' )] );
});
// Run
// gulp dist
// Copies the files to the /dist folder for distribution as simple theme
gulp.task( 'dist', ['clean-dist'], function() {
return gulp.src( ['**/*', '!' + paths.bower, '!' + paths.bower + '/**', '!' + paths.node, '!' + paths.node + '/**', '!' + paths.dev, '!' + paths.dev + '/**', '!' + paths.dist, '!' + paths.dist + '/**', '!' + paths.distprod, '!' + paths.distprod + '/**', '!' + paths.sass, '!' + paths.sass + '/**', '!readme.txt', '!readme.md', '!package.json', '!package-lock.json', '!gulpfile.js', '!gulpconfig.json', '!CHANGELOG.md', '!.travis.yml', '!jshintignore', '!codesniffer.ruleset.xml', '*'], { 'buffer': true } )
.pipe( replace( '/js/jquery.slim.min.js', '/js' + paths.vendor + '/jquery.slim.min.js', { 'skipBinary': true } ) )
.pipe( replace( '/js/popper.min.js', '/js' + paths.vendor + '/popper.min.js', { 'skipBinary': true } ) )
.pipe( replace( '/js/skip-link-focus-fix.js', '/js' + paths.vendor + '/skip-link-focus-fix.js', { 'skipBinary': true } ) )
.pipe( gulp.dest( paths.dist ) );
});
// Deleting any file inside the /dist folder
gulp.task( 'clean-dist', function() {
return del( [paths.dist + '/**'] );
});
// Run
// gulp dist-product
// Copies the files to the /dist-prod folder for distribution as theme with all assets
gulp.task( 'dist-product', ['clean-dist-product'], function() {
return gulp.src( ['**/*', '!' + paths.bower, '!' + paths.bower + '/**', '!' + paths.node, '!' + paths.node + '/**', '!' + paths.dist, '!' + paths.dist +'/**', '!' + paths.distprod, '!' + paths.distprod + '/**', '*'] )
.pipe( gulp.dest( paths.distprod ) );
} );
// Deleting any file inside the /dist-product folder
gulp.task( 'clean-dist-product', function() {
return del( [paths.distprod + '/**'] );
} );
// Run:
// gulp
// Starts watcher (default task)
gulp.task('default', ['watch']);
My terminal process and error message after saving my .scss files
arobinson$ gulp
[15:27:23] Using gulpfile /understrap-child/gulpfile.js
[15:27:23] Starting 'watch'...
[15:27:23] Finished 'watch' after 12 ms
[15:27:23] Starting 'default'...
[15:27:23] Finished 'default' after 21 μs
[15:27:35] Starting 'styles'...
[15:27:35] 'styles' errored after 171 ms
[15:27:35] Error: task "sass" is not defined
at Gulp.sequence (/Users/arobinson/node_modules/sequencify/index.js:14:9)
at Gulp.Orchestrator.start (/Users/arobinson/node_modules/orchestrator/index.js:115:9)
at /Users/arobinson/node_modules/gulp-sequence/index.js:66:12
at apply (/Users/arobinson/node_modules/thunks/index.js:354:38)
at tryRun (/Users/arobinson/node_modules/thunks/index.js:224:19)
at runThunk (/Users/arobinson/node_modules/thunks/index.js:217:15)
at /Users/arobinson/node_modules/thunks/index.js:314:49
at apply (/Users/arobinson/node_modules/thunks/index.js:354:38)
at tryRun (/Users/arobinson/node_modules/thunks/index.js:224:19)
at runThunk (/Users/arobinson/node_modules/thunks/index.js:217:15)
From the gulp-sequence docs:
gulpSequence.use(gulp)
return a new gulpSequence function with the gulp. If you have some
errors such as "task xxx is not defined", this will resolve it.
var gulpSequence = require('gulp-sequence').use(gulp)
So change to
var gulpSequence = require('gulp-sequence').use(gulp)
and see if that helps.
I'm trying to build a bit complex workflow in gulp 4, essentially I would like to run 5 tasks one after another every time I run the "default" gulp task (see tasks list below); but I have experienced some bugs, if I run them one by one manually, all works good, but if I run the "default" task, it seems gulp going crazy and didn't end all the tasks, it stop at task 4, but the result has no concat inside, and miss completely the task 5, even if in the bash said "finished". I think the problem is the time execution.
Tasks list:
1. Task 1: pull vendors from "node_modules/vendor folder" into "src/vendors/pending" (I know isn't necessary pull out vendors, but I have my reasons)
2. Task 2: concat and compressing all js inside "src/vendors/pending" and push into "src/vendors/ready"; concat name result: "vendors.min.js"
3. Task 3: compiling and compressing my es6 script and push into "src/requests/pending"; compiling name result: "main.min.js"
4. Task 4: concat "vendors.min.js" and "main.min.js" and push into "src/request/ready" compiling name result: "frontend.min.js"
5. Task 5: create map and push "frontend.min.js" into "assets/js" folder
default task:
gulp.task('default', gulp.series('task1', 'task2', 'task3, 'task4', 'task5' ));
Is there a way to make a task dependent on another and start next task only if the previous task has ended?
I tried wrapping all tasks with a "setTimeout function", and seems to work, but I don't like it very much, I'm looking for something that can run step by step.
Here the gulp file:
var gulp = require( 'gulp' );
const { src, dest, task, watch, series, parallel } = require('gulp');
// JS related plugins
var concat = require( 'gulp-concat' );
var uglify = require( 'gulp-uglify' );
var babelify = require( 'babelify' );
var browserify = require( 'browserify' );
var source = require( 'vinyl-source-stream' );
var buffer = require( 'vinyl-buffer' );
var stripDebug = require( 'gulp-strip-debug' );
// Utility plugins
var rename = require( 'gulp-rename' );
var sourcemaps = require( 'gulp-sourcemaps' );
var notify = require( 'gulp-notify' );
var plumber = require( 'gulp-plumber' );
var options = require( 'gulp-options' );
var gulpif = require( 'gulp-if' );
// Browers related plugins
var browserSync = require( 'browser-sync' ).create();
// js
var jsFront = 'main.js';
var jsFiles = [ jsFront ];
// Tasks
function browser_sync() {
browserSync.init({
server: {
baseDir: './assets/'
}
});
}
function reload(done) {
browserSync.reload();
done();
}
function vendorsFront(done) {
gulp.src([
'./node_modules/jquery/dist/jquery.js',
'./node_modules/animejs/lib/anime.min.js',
])
.pipe(gulp.dest( './src/vendors/pending/frontend' ));
console.log(0);
done();
};
function vendorsFrontReady(done) {
return new Promise(function(resolve, reject) {
setTimeout(function() {
gulp.src([
'./src/vendors/pending/frontend/**/*.js'
])
.pipe(concat('vendors.js'))
.pipe( rename( {
extname: '.min.js'
} ) )
.pipe( uglify() )
.pipe(gulp.dest( './src/vendors/ready/frontend' ));
console.log(1);
done();
}, 1000)
resolve();
});
};
function js(done) {
jsFiles.map( function( entry ) {
return browserify({
entries: ['./src/scripts/' + entry]
})
.transform( babelify, { presets: [ '#babel/preset-env' ] } )
.bundle()
.pipe( source( entry ) )
.pipe( rename( {
extname: '.min.js'
} ) )
.pipe( buffer() )
.pipe( gulpif( options.has( 'production' ), stripDebug() ) )
.pipe( uglify() )
.pipe( dest( './src/requests/pending' ) )
.pipe( browserSync.stream() );
});
console.log(2);
done();
};
function concatVendorScripts(done) {
return new Promise(function(resolve, reject) {
setTimeout(function() {
return gulp.src([ './src/vendors/ready/frontend/**/*.js', './src/requests/pending/main.min.js' ])
.pipe( buffer() )
.pipe(concat('frontend.js'))
.pipe( rename( {
extname: '.min.js'
} ) )
.pipe( gulpif( options.has( 'production' ), stripDebug() ) )
.pipe( dest( './src/requests/ready' ) )
console.log(3);
done();
}, 4000)
resolve();
});
};
function moveJs(done) {
return new Promise(function(resolve, reject) {
setTimeout(function() {
return gulp.src('./src/requests/ready/*')
.pipe(sourcemaps.init({loadMaps: true}))
.pipe( sourcemaps.write( '.' ) )
.pipe(gulp.dest('./assets/js/' ));
console.log(4);
done();
}, 5000)
resolve();
});
};
function triggerPlumber( src_file, dest_file ) {
return src( src_file )
.pipe( plumber() )
.pipe( dest( dest_file ) );
}
task("vendorsFront", vendorsFront);
task("vendorsFrontReady", vendorsFrontReady);
task("concatVendorScripts", concatVendorScripts);
task("moveJs", moveJs);
gulp.task('default', gulp.series('vendorsFront', 'js','vendorsFrontReady', 'concatVendorScripts', 'moveJs'));
you may use Gulp 4 series, please refer below link:
https://fettblog.eu/gulp-4-parallel-and-series/
The best way to achieve this was using Promise, create one task and use promise as below
gulp.task('compile-code', gulp.series(function () {
return Promise.all([
new Promise(function (resolve, reject) {
gulp.src([
'./src/services/*.js',
'./src/directives/directive.js'])
.pipe(concat('bundle.js'))
.on('error', reject)
.pipe(gulp.dest('./'))
.on('end', resolve);
}),
new Promise(function (resolve, reject) {
gulp.src(['./src/assets/css/*.css'])
.pipe(concat('style.css'))
.pipe(gulp.dest('assets/css'))
.on('error', reject)
.pipe(gulp.dest('./'))
.on('end', resolve);
}),
new Promise(function (resolve, reject) {
gulp.src(['./src/assets/img/*'])
.on('error', reject)
.pipe(gulp.dest('assets/img'))
.on('end', resolve);
}),
new Promise(function (resolve, reject) {
gulp.src(['./src/views/*.html'])
.on('error', reject)
.pipe(gulp.dest('views/'))
.on('end', resolve);
}),
new Promise(function (resolve, reject) {
gulp.src(['./src/robots.txt'])
.on('error', reject)
.pipe(gulp.dest('./'))
.on('end', resolve);
})
]).then(function () {
gulp.src('/index.html')
.pipe(browserSync.reload({
stream: true
}))
.pipe(gulp.dest('./'));
});
}));
I'm trying to figure out how to send files without src dir when gulp is deploying dist on ftp server.
My config:
var gutil = require( 'gulp-util' );
var ftp = require( 'vinyl-ftp' );
gulp.task( 'deploy', function() {
var conn = ftp.create( {
host: 'hydrogen',
user: 'hosting',
password: 'test',
parallel: 10,
log: gutil.log
} );
var globs = [
'src/**',
'css/**',
'js/**',
'fonts/**',
'index.html'
];
// using base = '.' will transfer everything to /public_html correctly
// turn off buffering in gulp.src for best performance
return gulp.src( globs, { base: '.', buffer: false } )
.pipe( conn.newer( '/projects/test' ) ) // only upload newer files
.pipe( conn.dest( '/projects/test' ) );
} );
So, after deploy I get projects/test/src path. I want to get files without src dir or rename it.
Try using flatten to remove the path information from the files.