I have a gulp script which is supposed to copy some dll's in sub directories, if those files have the ending with for instace .Plugin. So I have this structure in my solution:
Now I want to copy all of my assemblies with name ending with .Plugin.dll up to the folder Plugins right under Host. This is my gulp script so far:
gulp.task('pluginsCopy', function (cb) {
gulp.src('.\/**/bin/Debug/*.Plugins')
.pipe(newer("bin/Debug/Plugins/"))
.pipe(gulp.dest("bin/Debug/Plugins/"))
});
As you can see, I dont have that much experience with gulp, but could someone please give me a hint?
Thanks!
You could do something like this:
var gulp = require('gulp');
var bases = {
app: 'MySolution/',
dist: 'MySolution/bin/Debug/Plugins',
};
var paths = {
text: '**/*.dll.txt'
};
// Copy all other files to dist directly
gulp.task('copy', function() {
// Copy txt
gulp.src(paths.text, {cwd: bases.app})
.pipe(gulp.dest(bases.dist));
});
gulp.task('default', ['copy']);
Figured it out:
gulp.task('pluginCopy', function (cb) {
gulp.src('../*Plugin/bin/Debug/*.Plugin.dll')
.pipe(newer("bin/Debug/Plugins/"))
.pipe(rename({ dirname: '' }))
.pipe(gulp.dest("bin/Debug/Plugins/"))
});
Related
I want to use gulp to compile SASS for my custom Wordpress plugins.
All plugin folder share same folder structure:
wp-content/plugins/pluginname
assets
dist -
src - scss
GULP TASK
gulp.task('plugin-css', () => {
// Main SASS Style Sheet
const pluginSass = gulp.src(`wp-content/plugins/**/assets/src/*.scss`)
.pipe(plumber(plumberErrorHandler))
.pipe(sass());
// Merge the two streams and concatenate their contents into a single file
return merge(pluginSass)
.pipe(autoprefixer())
.pipe(cssmin())
.pipe(gulp.dest(function(file) {
return file.base;
}));
});
Currently my compiled css file is being output into the same folder as the src sass. How can I output my compiled sass into 'dist' folder?
It is not clear to me what you are trying to do with the merges (so NOTE I simplified those out) but here is something that should help you get to putting your result into a dist folder where you want it to be:
var path = require('path');
var rename = require('gulp-rename');
gulp.task('default', function () {
const pluginSass = gulp.src("wp-content/plugins/**/assets/src/*.scss")
.pipe(sass())
// return merge(pluginSass)
.pipe(rename(function (file) {
var temp = path.dirname(file.dirname);
console.log('temp = ' + temp);
file.dirname = path.join(temp, "dist");
console.log("file.dirname = " + file.dirname);
}))
.pipe(cssmin())
// .pipe(autoprefixer())
.pipe(gulp.dest("wp-content/plugins"));
});
gulp-rename is useful for these situations and always seems to be easier to use that gulp.dest(function... path manipulation).
Pass the dist folder to the gulp.dest function.
const path = require('path')
return merge(pluginSass)
.pipe(autoprefixer())
.pipe(cssmin())
.pipe(gulp.dest(function (file) {
return path.join(file.base, './dist') // ← Put your folder path here
}));
See docs here: https://github.com/gulpjs/gulp/blob/master/docs/API.md#gulpdestpath-options
I want to run gulp sass task and obtain smth like this:
From:
/app
/componentA
fileA.scss
/componentB
fileB.scss
/componentC
fileC.scss
/dist
/componentA
/componentB
/componentC
To:
/app
/componentA
fileA.scss
/componentB
fileB.scss
/componentC
fileC.scss
/dist
/componentA
fileA.css
/componentB
fileB.css
/componentC
fileC.css
Without putting this all to one folder "dist/css".
Me current code related to sass:
var target = {
css: 'dist/css',
sass: 'app/scss/*.scss'
};
gulp.task('sass', function () {
return gulp.src(target.sass)
.pipe(plumber(function () {
console.log('[sass]'.bold.magenta + ' Sass compiling error\n'.bold.red);
this.emit('end');
}))
.pipe(changed(target.css))
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest(target.css));
});
I have read other topics, but they do not correspond to my problem.
This is as simple as changing your globbing patterns:
var target = {
css: 'dist',
sass: 'app/**/*.scss'
};
You should probably read the GulpJS documentation and brush up on node-glob.
I have the following gulp file:
var paths = {
all: ['*.js', '**/*.js', 'index.html'],
js: ['*.js', '**/*.js'],
html: 'index.html',
dist: 'dist'
};
var gulp = require("gulp");
var babel = require("gulp-babel");
gulp.task("default", function () {
gulp.src(paths.html)
.pipe(gulp.dest(paths.dist));
return gulp.src(paths.js)
.pipe(babel())
.pipe(gulp.dest(paths.dist));
});
gulp.task('watch', function(){
gulp.watch(paths.all, ['default']);
});
When I run it, I get this error
SyntaxError: d:/project_folder/node_modules/gulp-babel/node_modules/gulp-util/node_modules/beeper/index.js: 'return' outside of function (9:1) ...`
I read somewhere that I shouldn't compile dependencies. I run just gulp with no following flags. So I don't know wehether or not I do compile them. But gulp seems slow because it takes few seconds to get to first task. How to get rid of this error? And am I doing something wrong with dependencies?
Yes, you are currently including all .js files from the current directory, not the source directories. Your application code (lets assume app.js) will "include" your dependencies by using common js requires, such as:
var request = require('request');
In order to actually map the require statements you would want to use a module loader, or packer such as: Browserify or Webpack
The following gulp task will solve the module errors:
var paths = {
all: ['./src**/*.js', 'index.html'],
js: ['./src/**/*.js'],
html: 'index.html',
dist: 'dist'
};
var gulp = require('gulp');
var babel = require('gulp-babel');
gulp.task('default', function () {
gulp.src(paths.html)
.pipe(gulp.dest(paths.dist));
return gulp.src(paths.js)
.pipe(babel())
.pipe(gulp.dest(paths.dist));
});
gulp.task('watch', function(){
gulp.watch(paths.all, ['default']);
});
This only includes all the .js files in the src folder, not **/*.js which will include all *.js files in every folder including node_modules bower_components.
Regarding module loading:
You would probably want to use a loader task to bundle all your client code instead of just copying them to the dist, such as:
gulp.task("webpack", function(callback) {
// run webpack
webpack({
// configuration
}, function(err, stats) {
if(err) throw new gutil.PluginError("webpack", err);
gutil.log("[webpack]", stats.toString({
// output options
}));
callback();
});
});
I am trying to copy all .css files within subfolders to another folder with gulp
gulp.task('copyCss', function () {
gulp.src('/bower_components/*.{css}')
.pipe(gulp.dest('/content/css'));
});
But this does not work, because in bower_components i have a lot of subfolders?
You are not able to access the nested directory. Try using gulp-flatten:
var flatten = require('gulp-flatten');
gulp.task('copyCss', function () {
gulp.src('/bower_components/**/*.css')
.pipe(flatten())
.pipe(gulp.dest('/content/css'));
});
In my project structure I have app folder for development, I would like to move the .html files and the content of /css to a folder above it called /dist.
In my gulp tasks I tried this:
gulp.task('prod', function() {
gulp.src('app/*.html')
.pipe(gulp.dest('dist'))
gulp.src('app/css/*.css')
.pipe(gulp.dest('dist/css'))
});
This didn't work out. The only way was to create two different tasks:
gulp.task('prod_html', function() {
return gulp.src('app/*.html')
.pipe(gulp.dest('dist'))
});
gulp.task('prod_css', function() {
return gulp.src('app/css/*.css')
.pipe(gulp.dest('dist/css'))
});
But this seems to be the bad practice to create servera different tasks in the end; one for the html files, then for /css and /js and /images
cheers
Sohail
I ended up using merge-stream :)
npm install --save-dev gulp merge-stream
Then:
var merge = require('merge-stream');
gulp.task('prod', function() {
var html = gulp.src('app/*.html')
.pipe(gulp.dest('dist'))
var css = gulp.src('app/css/*.css')
.pipe(gulp.dest('dist/css'))
return merge(html, css);
});
and put in my default tasks :)