This question already has an answer here:
Why does gulp.src not like being passed an array of complete paths to files?
(1 answer)
Closed 7 years ago.
I have a gulp.js configuration set up to automatically compile my SASS and CoffeeScript on save. It works, except that the relative paths are totally lost, and all the files are output into a single flat directory. I would like to retain the sub-directory structure of my app/assets/sass and app/assets/coffee directories when the final CSS and JS files are compiled. Here is my gulpfile:
var gulp = require('gulp');
var plumber = require('gulp-plumber');
var gutil = require('gulp-util');
var minifycss = require('gulp-minify-css');
var autoprefixer = require('gulp-autoprefixer');
var sass = require('gulp-ruby-sass');
var coffee = require('gulp-coffee');
var sassDir = 'app/assets/sass';
var coffeeDir = 'app/assets/coffee';
gulp.task('sass', function() {
return gulp.src(sassDir + '/**/*.scss')
.pipe(plumber())
.pipe(sass({ style: 'compress' }).on('error', gutil.log))
.pipe(autoprefixer('last 10 versions'))
.pipe(minifycss())
.pipe(gulp.dest('public/css'));
});
gulp.task('coffee', function() {
return gulp.src(coffeeDir + '/**/*.coffee')
.pipe(plumber())
.pipe(coffee({ bare: true }).on('error', gutil.log))
.pipe(gulp.dest('public/js/coffee)'));
});
gulp.task('watch', function() {
gulp.watch(sassDir + '/**/*.scss', ['sass']);
gulp.watch(coffeeDir + '/**/*.coffee', ['coffee']);
});
gulp.task('default', ['sass', 'coffee', 'watch']);
only split path string with / and get the last which is the filename and extension and then cut it
to get files path
gulp.task('testing', function() {
var orginalFile="tt/ee/style.scss";
var pathArray=orginalFile.split('/');
var destination=orginalFile.replace(pathArray[pathArray.length-1],"")
gulp.src(orginalFile)
.pipe(sass())
.pipe(gulp.dest(destination));
})
});
Related
i have trouble to use Gulp 4. My watch-task runs only one time, when detecting changes, inside my html-files.
Where is my mistake? Please help me to fix my gulpfile
Here is my code:
var gulp = require('gulp'),
sass = require('gulp-sass'),
cleanCSS = require('gulp-clean-css'),
autoprefixer = require('gulp-autoprefixer'),
rename = require('gulp-rename'),
inject = require('gulp-inject'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
plumber = require('gulp-plumber'),
babel = require('gulp-babel'),
browserify = require('gulp-browserify'),
clean = require('gulp-clean'),
sourcemaps = require('gulp-sourcemaps'),
htmlmin = require('gulp-html-minifier'),
browserSync = require('browser-sync');
var src = './src/',
dist = './dist/';
//####################################
// MINIFY HTML
gulp.task('html', function(){
gulp.src(dist + '*.html', {force: true})
.pipe(clean());
gulp.src(src + '*.html')
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest(dist));
});
//####################################
// WATCH
gulp.task('default', function(){
gulp.watch([src + '*.html'], gulp.series('html'));
});
When i run the html-task manually, i get the following warning:
The following task did not complete: html
Did you forget to signal async completion?
How can i solve this issue, too?
I solved my issue, with this code change, inside my html file:
gulp.task('html', done => {
gulp.src(dist + '*.html', {force: true})
.pipe(clean());
gulp.src(src + '*.html')
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest(dist));
done();
});
The Watch-Task works now
The simplified structure of the project looks like this. JavaScript files that lie in the es6 directory must be moved to the neighbors directory js.
var gulp = require('gulp');
var babel = require('gulp-babel');
gulp.task('build-js', function () {
gulp.src('app/core/**/es6/**/*.js')
.pipe(babel({
presets: ["env"]
}))
.pipe(gulp.dest(???)); // need move to ../js
});
Please, help me, how to implement this in gulp?
I assume that the babel pipe doesn't move the js files that are in the es6 folder or add any folders. And that your gulpfile.js is at the root level of your "app" folder.
var gulp = require('gulp');
var path = require('path');
var rename = require('gulp-rename');
gulp.task('default', function () {
// with gulpfile.js at root of "app" folder
return gulp.src('core/**/es6/*.js')
.pipe(rename(function (file) {
console.log("file.dirname = " + file.dirname);
// file.dirname = AdminTools\es6
// file.dirname = Permissions\es6
// strip off the last folder 'es6'
var temp = file.dirname.split(path.sep)[0];
file.dirname = temp + "/js";
// file.dirname = AdminTools\js
// file.dirname = Permissions\js
}))
.pipe(gulp.dest('core'));
});
I generate CSS from LESS files and want to give to all generated Bootstrap CSS files a prefix "bootsrtap", but not to the bootstrap.css. So, I set the prefix directly after the compilation, but all my attempts to do a futher rename are failing.
var gulp = require('gulp'),
less = require('gulp-less'),
watch = require('gulp-watch'),
prefix = require('gulp-autoprefixer'),
plumber = require('gulp-plumber'),
filter = require('gulp-filter'),
rename = require('gulp-rename'),
path = require('path')
;
// ...
gulp.task('build-vendors', function() {
gulp.src(['./public/components/bootstrap/less/theme.less', './public/components/bootstrap/less/bootstrap.less']) // path to less file
.pipe(plumber())
.pipe(less())
.pipe(rename({prefix: 'bootstrap-'}))
.pipe(gulp.dest('./public/css')) // path to css directory
;
});
gulp.task('clean-up', function() {
// const bootstrapFileRenameFilter = filter(['*', 'bootstrap-bootstrap.css']);
gulp.src('./public/css/bootstrap-bootstrap.css')
.pipe(plumber())
// .pipe(bootstrapFileRenameFilter)
.pipe(rename({basename: 'bootstrap.css'}))
.pipe(gulp.dest('./public/css'))
;
});
gulp.task('watch', function() {
gulp.watch('public/less/*.less', ['build-less', 'build-vendors'])
});
// gulp.task('default', ['watch', 'build-less', 'build-vendors']);
gulp.task('default', ['build-less', 'build-vendors', 'clean-up']);
What I expect:
./public/css/bootstrap-theme.css
./public/css/bootstrap.css
What I'm currently getting:
./public/css/bootstrap-theme.css
./public/css/bootstrap-bootstrap.css
How to rename a single file from a.foo to b.bar?
gulp-rename accepts a function as an argument to do the renaming. This allows you to target specific files for renaming using any criteria you like. In your case:
gulp.task('build-vendors', function() {
gulp.src(['./public/components/bootstrap/less/theme.less',
'./public/components/bootstrap/less/bootstrap.less'])
.pipe(plumber())
.pipe(less())
.pipe(rename(function(path) {
//rename all files except 'bootstrap.css'
if (path.basename + path.extname !== 'bootstrap.css') {
path.basename = 'bootstrap-' + path.basename;
}
}))
.pipe(gulp.dest('./public/css'));
});
Since you now only rename those files where you actually want to have the bootstrap- prefix, you don't have to clean-up your mess afterwards and can just drop the whole clean task altogether.
I am using gulp for the first time and obviously got 2 problems as follows
First here goes my gulp file, it is very basic nothing fancy yet.
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
gulp.task('scripts', function() {
return gulp.src('js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('dist'))
.pipe(rename('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest('dist'));
});
gulp.task('controllers', function() {
return gulp.src('controllers/*.js')
.pipe(concat(EVER_FILE))
.pipe(gulp.dest('dist'))
.pipe(rename(EVER_FILE))
.pipe(uglify())
.pipe(gulp.dest('dist'));
});
gulp.task('default', ['scripts','controllers']);
Question 1: How do i get the controllers task to concat and minify each file on its own?
Question 2: How do i create a task that can add a random number in the index.html Javascript files as in <script src='js/controller.js?RandomNumber'></script>
For some reason console.log and alert() functions don't seem to be working across any of my js files.
I'm using gulp to concatenate and compile a set of .js files (gulpfile.js below). I think this is where the problem lies as when I throw an alert or a console.log into an HTML page, they work fine.
// include gulp
var gulp = require('gulp');
// --------------------------------------------------------------
// Plugins
// ---------------------------------------------------------------
var concat = require('gulp-concat');
var stripDebug = require('gulp-strip-debug');
var uglify = require('gulp-uglify');
var include = require('gulp-include');
var sass = require('gulp-sass');
var minifycss = require('gulp-minify-css');
var watch = require('gulp-watch');
var livereload = require('gulp-livereload');
var changed = require('gulp-changed');
//var notify = require('gulp-notify');
//var plumber = require('gulp-plumber');
// --------------------------------------------------------------
// JS
// ---------------------------------------------------------------
gulp.task('scripts', function() {
gulp.src(['./js/script.js'])
.pipe(include())
.pipe(concat('script-dist.js'))
.pipe(stripDebug())
.pipe(uglify())
.pipe(gulp.dest('./js/'))
.pipe(livereload());
});
// --------------------------------------------------------------
// Sass
// ---------------------------------------------------------------
gulp.task('styles', function() {
gulp.src('./ui/scss/styles.scss')
.pipe(include())
.pipe(sass({
errLogToConsole: true
}))
.pipe(minifycss())
.pipe(gulp.dest('./ui/css/'))
.pipe(livereload());
//.pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
//.pipe(through(function () {
// this.emit("error", new Error("Something happened: Error message!"))
//}));
});
// --------------------------------------------------------------
// Watch & Reload
// ---------------------------------------------------------------
gulp.task('watch', function() {
gulp.watch('./ui/scss/*.scss', ['styles']);
gulp.watch(['./js/*.js', '!./js/vendor/**', '!./js/script-dist.js'], ['scripts']);
});
gulp.task('default', ['styles', 'watch']);
gulp.task('default', ['scripts', 'watch']);
livereload.listen();
Solved it, it was gulp-strip-debug. It strips out all alerts and console.logs.
Commented that out and everything works fine.