I am just getting started with Gulp.
I have this:
var path = require('path');
var appRoot = 'src/';
var outputRoot = 'dist/';
module.exports = {
root: appRoot,
source: appRoot + '**/*.js',
html: appRoot + '**/*.html',
style: 'styles/**/*.css',
output: outputRoot,
doc:'./doc',
e2eSpecsSrc: 'test/e2e/src/*.js',
e2eSpecsDist: 'test/e2e/dist/'
};
This pathing is used to convert the source files from ES6 to ES5, and then drop in them in the dist directory. This all works fine.
However, it only takes the files from the src directory, not subfolders. How do I include the subfolders such as src\dir1 and src\dir2?
src/**/*.js should take care of all js files in all subfolders.
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 am completely new to gulp, and while I have managed to implement some cool tasks wit gulp, I am having trouble implementing a task that will clear files matching specic pattern from specified directory.
In this particular case I would like to remove all files matching pattern '*.min.css' from css dir.
Here is a piece of code that deletes all files including directory, which is wrong. I want to remove only min.css files
var gulp = require("gulp"),
rimraf = require("rimraf"),
concat = require("gulp-concat"),
cssmin = require("gulp-cssmin"),
uglify = require("gulp-uglify"),
sass = require('gulp-sass'),
rename = require('gulp-rename'),
del = require('del');
var paths = {
webroot: "./wwwroot/"
};
paths.cssMinOutputPath = paths.webroot + "css";
gulp.task("clean:min.css", function (cb) {
del([paths.cssMinOutputPath, "*.min.css"], cb);
});
I was keep playing around, and magically I have resolved the issue. It makes sense though. Here is the snippet:
gulp.task("clean:min.css", function (cb) {
del([paths.cssMinOutputPath + "/*.min.css"], cb);
});
I have installed both jQuery and jQuery-Validation in my ASP.Net 5 application using the new Bower system. This has crated a folder called lib which contains a folder for both packages. In the folder for the packages there are LOTS of files and subfolders and after some digging around it looks like I only need to use the .js files in the dist folder.
I am also using gulp for bundling and minification but I am not sure how to configure it so it will add the files form the dist folders along with my own custom JavaScript files.
I am very new to both Gulp and Bower but so far they look far more cumbersome, annoying, and complex then the old NuGet and ASP.Net 2.5 Bundling and Minification way.
My Gulp (generated by VS2015 for me):
///
"use strict";
var gulp = require("gulp"),
rimraf = require("rimraf"),
concat = require("gulp-concat"),
cssmin = require("gulp-cssmin"),
uglify = require("gulp-uglify");
var paths = {
webroot: "./wwwroot/"
};
paths.js = paths.webroot + "js/**/*.js";
paths.minJs = paths.webroot + "js/**/*.min.js";
paths.css = paths.webroot + "css/**/*.css";
paths.minCss = paths.webroot + "css/**/*.min.css";
paths.concatJsDest = paths.webroot + "js/site.min.js";
paths.concatCssDest = paths.webroot + "css/site.min.css";
gulp.task("clean:js", function (cb) {
rimraf(paths.concatJsDest, cb);
});
gulp.task("clean:css", function (cb) {
rimraf(paths.concatCssDest, cb);
});
gulp.task("clean", ["clean:js", "clean:css"]);
gulp.task("min:js", function () {
return gulp.src([paths.js, "!" + paths.minJs], { base: "." })
.pipe(concat(paths.concatJsDest))
.pipe(uglify())
.pipe(gulp.dest("."));
});
gulp.task("min:css", function () {
return gulp.src([paths.css, "!" + paths.minCss])
.pipe(concat(paths.concatCssDest))
.pipe(cssmin())
.pipe(gulp.dest("."));
});
gulp.task("min", ["min:js", "min:css"]);
EDIT:
I just added jquery.validatie.unobtrusive and it does not have a dist folder just some json files and the core .js file at the package root so how do I make sure I am grabbing all the right stuff here?
Assuming your dist folder is under webroot:
paths.dist = paths.webroot + "dist/**/*.js";
..
gulp.task("min:js", function () {
return gulp.src([paths.js, paths.dist, "!" + paths.minJs], { base: "." })
The key is that you set the source folders that gulp pulls files from. Notice that I added my paths.dist to the array? That adds that folder and all js files under it to gulp. If you need another folder, add another property to paths and add it to the array.
I am a newbie to gulp. I am trying to create one single vendor.css file and vendor.js file with gulp.
The vendor.css should be
-bootstrap.css
The vendor.js should be
-jquery.js
-bootstrap.js
-angular.js
-angular-ui-router.js
gulpfile.js
// Include Gulp
var gulp = require('gulp');
// Include plugins
var plugins = require("gulp-load-plugins")({
pattern: ['gulp-*', 'gulp.*'],
replaceString: /\bgulp[\-.]/
});
// Define default destination folder
var dest = 'public';
gulp.task('vendorjs', function(){
var filterJS = plugins.filter('**/*.js');
return gulp.src('./bower.json')
.pipe(plugins.mainBowerFiles( ))
.pipe(filterJS)
.pipe(plugins.concat('vendor.js'))
.pipe(plugins.uglify())
.pipe(filterJS.restore())
.pipe(gulp.dest(dest+"/vendor/js/"));
});
gulp.task('vendorcss', function(){
var filterCSS = plugins.filter('**/*.css');
return gulp.src('./bower.json')
.pipe(plugins.mainBowerFiles( ))
.pipe(filterCSS)
.pipe(plugins.concat('vendor.css'))
.pipe(plugins.uglify())
.pipe(filterCSS.restore())
.pipe(gulp.dest(dest+"/vendor/css/"));
});
gulp.task('default', function() {
// place code for your default task here
});
gulp.task('serve', ['vendorcss','vendorjs'], function () {
});
When i run gulp serve, it executes without error. But I end up with
public/vendor/css/angular/angular.js
public/vendor/css/angular-ui-router/release/angular-ui-router.js
public/vendor/css/bootstrap/dist/js/bootstrap.js
public/vendor/css/bootstrap/less/bootstrap.less
public/vendor/css/jquery/dist/jquery.js
public/vendor/js/vendor.js
public/vendor/js/bootstrap/less/bootstrap.less
Why do my css files are missing. Why do i get less file.
My output should be
public/vendor/vendor.js
public/vendor/vendor.css
How do i map the vendor.js and vendor.css with my html
I have the next files structure:
modules/
list/
news/
news.scss
login/
login.scss
common/
common.scss
And I want to get next structure using gulp:
modules/
list/
news/
news.scss
news.css
login/
login.scss
login.css
common/
common.scss
Here is part from my gulpfile:
gulp.src("modules/list/*/*.scss")
.pipe(sass())
.pipe(gulp.dest("modules/list/"));
In common.scss there are different variables. It is necessary that variables from common.scss will be used in each module(news.scss, login.scss). How to update my gulpfile that common.scss will be concatenated with each module scss file?
Sounds like a job for stream arrays... here's the solution, please check the comments for what's going on:
var merge = require('merge2');
var glob = require('glob');
var gulp = require('gulp');
var concat = require('gulp-concat');
var sass = require('gulp-sass');
gulp.task('styles', function(done) {
// first, we glob our files like we would with gulp.src
glob('modules/list/**/*.scss', function(er, files) {
// for each of those files we create a new stram
var tasks = files.map(function(file) {
// this gives us the concat name, which is the same
// as the original file's name
var concatStr = file.substr('modules/list/'.length)
// we load common.scss and our file
return gulp.src(['modules/common/common.scss', file])
// concatenate it
.pipe(concat(concatStr))
});
// we merge all our streams
merge(tasks)
// run them through sass
.pipe(sass())
// and save them where we want them
.pipe(gulp.dest('modules/list'));
// ~fin
done();
});
});
You might want to take a look into Sass's #import directive, though.