I trying to create dynamic gulp task which will loop through all files and folders and concat/compile it in corresponding folders.
Folders structure are for example:
theme/framework/modules/module-1/assets/css/scss/scss-file-1.scss and theme/framework/modules/module-2/assets/css/scss/scss-file-2.scss etc.
And gulp task is
gulp.task('modules-sass', function () {
return gulp.src([
'../../framework/modules/**/assets/css/scss/*.scss'
])
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(sassGlob())
.pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
.pipe(sourcemaps.write('.', {
includeContent: false,
sourceRoot: function(file) {
return '../css';
}
}))
.pipe(gulp.dest('../../framework/modules'));
});
Results are:
theme/framework/modules/module-1/assets/css/scss/scss-file-1.css
theme/framework/modules/module-1/assets/css/scss/scss-file-1.css.map
theme/framework/modules/module-2/assets/css/scss/scss-file-2.css
theme/framework/modules/module-2/assets/css/scss/scss-file-2.css.map
But I want to put css and map files inside css folder not inside scss!
Also I tried to set absolute path for destination for example
gulp.task('theme-modules-sass', function () {
return gulp.src([
'../../framework/modules/**/assets/css/scss/*.scss'
])
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(sassGlob())
.pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
.pipe(sourcemaps.write('.', {
includeContent: false,
sourceRoot: function(file) {
return '../css';
}
}))
.pipe(gulp.dest(function(file){
var filePath = file.path;
var module = filePath.substring(filePath.indexOf('\\modules'), filePath.indexOf('\\assets'));
var moduleName = module.replace('\\modules\\', '');
return '../../framework/modules/'+moduleName+'/assets/css/';
}));
});
But then gulp create inside css folder full file hierarchy, example
theme/framework/modules/module-1/assets/css/module-1/assets/css/scss/scss-file-1.css
Thanks for solutions
Best regards,
Nenad
I believe this is what you want. [It looks like your gulpfile.js is in the modules directory.]
// theme / framework / modules / module-1 / assets / css / scss / scss-file-1.scss
// theme / framework / modules / module-2 / assets / css / scss / scss-file-2.scss
var rename = require("gulp-rename");
var path = require("path");
gulp.task('modules-sass', function () {
return gulp.src([
'../../framework/modules/**/assets/css/scss/*.scss'
])
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(sassGlob())
.pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
.pipe(sourcemaps.write('.', {
includeContent: false,
sourceRoot: function(file) {
return '../css';
}
}))
.pipe(rename(function (file) {
// this removes the last parent directory of the relative file path
file.dirname = path.dirname(file.dirname);
console.log("file.dirname = " + file.dirname);
}))
.pipe(gulp.dest('../../framework/modules'));
});
gulp-rename works nicely here. I initially thought it was just for renaming basenames, like 'myFile.css', but it can ignore basenames and just manipulate the directory path as well. Which is what we do here.
We strip off the last directory name by taking the dirname of the file.dirname.
Related
I have this gulpfile.js where I'm minifying my js files the problem is that when I'm doing gulp build this task is creating the minified js files but not entering the key-value pairs in the rev-manifest.json.
gulp.task('js', function (done) {
console.log('minifying js...');
gulp.src('./assets/**/*.js')
.pipe(uglify())
.pipe(rev())
.pipe(gulp.dest('./public/assets'))
.pipe(rev.manifest({
cwd: 'public',
merge: true
}))
.pipe(gulp.dest('./public/assets'));
done()
});
I have a similar task for my scss files which converts scss to CSS and then minifies it. this is working absolutely fine adding proper key-value pairs in the rev-manifest.json
gulp.task('css', function (done) {
console.log('minifying css...');
gulp.src('./assets/sass/**/*.scss')
.pipe(sass())
.pipe(cssnano())
.pipe(gulp.dest('./assets.css'));
gulp.src('./assets/**/*.css')
.pipe(rev())
.pipe(gulp.dest('./public/assets'))
.pipe(rev.manifest({
cwd: 'public',
merge: true
}))
.pipe(gulp.dest('./public/assets'));
done();
});
this is what rev-manifest.json looks like
See it's only adding the css files here but not js files.
my rev-manifest.json is present inside public/assets/
In my case, manifests were not merging, they were getting overwritten. gulp.dest() causes the file to be overwritten. We indeed have to pass the path of the manifest as parameter before the options if we want the merge to work, here is the working code :
const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const cssnano = require('gulp-cssnano');
const rev = require('gulp-rev');
const uglify = require('gulp-uglify-es').default;
const imagemin = require('gulp-imagemin');
const del = require('del');
gulp.task('css', function(done){
console.log('minifying css...');
gulp.src('./assets/sass/**/*.scss')
.pipe(sass())
.pipe(cssnano())
.pipe(gulp.dest('./assets/'));
return gulp.src('./assets/**/*.css')
.pipe(rev())
.pipe(gulp.dest('./public/assets/'))
.pipe(rev.manifest('public/assets/rev-manifest.json', {
base: './public/assets',
merge: true // merge with the existing manifest (if one exists)
}))
.pipe(gulp.dest('./public/assets/'));
done();
});
gulp.task('js', function (done) {
console.log('minifying js...');
gulp.src('./assets/**/*.js')
.pipe(uglify())
.pipe(rev())
.pipe(gulp.dest('./public/assets/'))
.pipe(rev.manifest('public/assets/rev-manifest.json', {
base: './public/assets',
merge: true // merge with the existing manifest (if one exists)
}))
.pipe(gulp.dest('./public/assets/'));
done()
});
gulp.task('images', function(done){
console.log('compressing images...');
gulp.src('./assets/**/*.+(png|jpg|gif|svg|jpeg)')
.pipe(imagemin())
.pipe(rev())
.pipe(gulp.dest('./public/assets/'))
.pipe(rev.manifest('public/assets/rev-manifest.json', {
base: './public/assets',
merge: true // merge with the existing manifest (if one exists)
}))
.pipe(gulp.dest('./public/assets/'));
done();
});
// empty the public/assets directory
gulp.task('clean:assets', function(done){
del.sync('./public/assets');
done();
});
gulp.task('build', gulp.series('clean:assets', 'css', 'js', 'images'), function(done){
console.log('Building assets');
done();
});
I just deleted the rev-manifest.js file and build it again and it worked. Took me a day to do this.
Why God Why.
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');
});
});
How can I use the parent directory of a file-directory of a wildcard source in gulp?
Source files:
|gulpfile.js (just to show where the base is)
|elements/foundations/A/js/src/mainA.js
|elements/foundations/A/js/src/subA.js
|elements/foundations/B/js/src/mainB.js
...
|elements/foundations/F/js/src/mainF.js
Desired target/result:
|elements/foundations/A/js/mainA.min.js
|elements/foundations/A/js/subA.min.js
|elements/foundations/B/js/mainB.min.js
...
|elements/foundations/F/js/mainF.min.js
I've tried different approaches, but eventually none of them worked.
This one runs without errors but doesn't generate any files.
gulp.task('scripts', function () {
return gulp.src('./elements/foundations/**/js/src/*.js', {base: './elements/foundations/**/'})
.pipe(rename({suffix: '.min'}))
// .pipe(uglify()) and others ...
.pipe(gulp.dest('./'))
;
});
This one generates files, but directly in the src directory.
gulp.task('scripts', function () {
return gulp.src('./elements/foundations/**/js/src/*.js', {base: './elements/foundations/'})
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('./elements/foundations/'))
;
});
And if I try to use the wildcard (**) in the destination, gulp ends up in an infinite loop (independently of the position of the wildcard).
gulp.task('scripts', function () {
return gulp.src('./elements/foundations/**/js/src/*.js', {base: './elements/foundations/'})
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('./elements/foundations/**/'))
;
});
I've also tried to use it without setting the base, but the results were similar.
You can pass a function to gulp-rename for more complex renaming operations. This allows you for example to use the path module of node.js to manipulate file paths:
var gulp = require('gulp');
var rename = require('gulp-rename');
var path = require('path');
gulp.task('scripts', function() {
return gulp.src('./elements/foundations/**/js/src/*.js')
.pipe(rename(function(file) {
file.dirname = path.dirname(file.dirname);
file.basename = file.basename + '.min';
return file;
}))
// .pipe(uglify()) and others ...
.pipe(gulp.dest('./elements/foundations/'))
});
I have a git repo with multiple plugins (1 main one and several that are only intended to work with the main one). I am using this approach for distribution, since bower doesn't provide a way to have more than one plugin per git repo.
So, I need to minify each plugin, create a sourcemap for each plugin, and drop each one into an individual distribution folder that corresponds to a git submodule, which by convention I am naming the same as the plugin to make it simple. I came up with the following Gulp script that does that all in one step, which is mostly based off of the answers I found here.
return gulp.src(['./jquery.dirtyforms.js', './helpers/*.js', './dialogs/*.js'], { base: './' })
.pipe(jshint())
.pipe(jshint.reporter(stylish))
.pipe(rename(function (path) {
var baseName = path.basename;
var dirName = path.dirname;
if (dirName == 'helpers' || dirName == 'dialogs') {
path.basename = 'jquery.dirtyforms.' + dirName + '.' + baseName;
console.log(path.basename);
}
path.dirname = path.basename;
}))
.pipe(gulp.dest(distributionFolder))
.pipe(sourcemaps.init())
.pipe(rename(function (path) {
var baseName = path.basename;
var dirName = path.dirname;
if (dirName == 'helpers' || dirName == 'dialogs') {
path.basename = 'jquery.dirtyforms.' + dirName + '.' + baseName;
console.log(path.basename);
}
path.dirname = path.basename;
path.extname = '.min.js';
}))
.pipe(uglify({
outSourceMap: true,
sourceRoot: '/'
}))
.pipe(gulp.dest(distributionFolder))
.pipe(sourcemaps.write('.', {
includeContent: true,
sourceRoot: '/'
}))
.pipe(gulp.dest(distributionFolder));
It does exactly what I want except for one thing. The sourcemap file that is generated for each plugin includes the subdirectory in the path. Since the final destination of the plugin won't include this path, this is invalid.
In the jquery.dirtyforms.min.js.map file:
{"version":3,"sources":["jquery.dirtyforms/jquery.dirtyforms.min.js"]...
Should be
{"version":3,"sources":["jquery.dirtyforms.min.js"]...
And in the jquery.dirtyforms.min.js file:
//# sourceMappingURL=../jquery.dirtyforms/jquery.dirtyforms.min.js.map
Should be
//# sourceMappingURL=jquery.dirtyforms.min.js.map
I dug through the source of gulp-sourcemaps to try to find an option to override the file name, but there doesn't seem to be one.
Two possible solutions I came up with for this are:
Do a replace in each of the files using a regular expression
Generate the files in the distributionFolderand then move them to the correct subfolder after they are generated
But both of these seem like hacks. It would be better if the stream created them correctly in the first place. Is there a way to make that so?
I ended up going with the second option I mentioned - that is, generate the minified files in the distributionFolder (now settings.dest) and then moved them with separate copy and delete tasks.
var gulp = require('gulp'),
uglify = require('gulp-uglify'),
jshint = require('gulp-jshint'),
stylish = require('jshint-stylish'),
rename = require('gulp-rename'),
sourcemaps = require('gulp-sourcemaps'),
del = require('del');
var settings = {
baseProject: 'jquery.dirtyforms',
src: ['./jquery.dirtyforms.js', './helpers/*.js', './dialogs/*.js'],
dest: './dist/'
};
// Moves the .js files to the distribution folders and creates a minified version and sourcemap
gulp.task('build', ['copy-minified'], function (cb) {
del([settings.dest + '*.js', settings.dest + '*.map'], cb);
});
gulp.task('copy-minified', ['uglify'], function () {
return gulp.src([settings.dest + '*.js', settings.dest + '*.map'], { base: './' })
.pipe(rename(function (path) {
console.log('moving: ' + path.basename)
path.dirname = path.basename.replace(/\.min(?:\.js)?/g, '');
}))
.pipe(gulp.dest(settings.dest));
});
gulp.task('uglify', ['clean', 'test'], function () {
return gulp.src(settings.src, { base: './' })
.pipe(rename(function (path) {
var baseName = path.basename;
var dirName = path.dirname;
if (dirName == 'helpers' || dirName == 'dialogs') {
path.basename = settings.baseProject + '.' + dirName + '.' + baseName;
}
path.dirname = path.basename;
}))
.pipe(gulp.dest(settings.dest))
.pipe(sourcemaps.init())
.pipe(rename(function (path) {
path.dirname = '';
path.extname = '.min.js';
}))
.pipe(uglify({
outSourceMap: true,
sourceRoot: '/'
}))
.pipe(gulp.dest(settings.dest))
.pipe(sourcemaps.write('.', {
includeContent: true,
sourceRoot: '/'
}))
.pipe(gulp.dest(settings.dest));
});
// Tests the source files (smoke test)
gulp.task('test', function () {
return gulp.src(settings.src, { base: './' })
.pipe(jshint())
.pipe(jshint.reporter(stylish));
});
Maybe there is a better alternative that isn't such a hack, but this worked for me.
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");
});
});