I have this code in my gulpfile.js
// Sass configuration
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function() {
gulp.src('*.scss')
.pipe(sass())
.pipe(gulp.dest(function(f) {
return f.base;
}))
});
gulp.task('default', ['sass'], function() {
gulp.watch('*.scss', ['sass']);
})
This basically watches all scss file.
My theme.scss contains:
#import "default"
#import "buttons"
I want to watch for a specific file i.e default.scss and buttons.scss and if those are modified I want to src in my theme.scss and regenerate theme.css
How do I modify the above code to achieve this?
Any help is appreciated.
If I understand your question, I think this might be a solution
gulp.task('default', function(){
gulp.watch(['default.scss', 'buttons.scss', ..., 'the-files-you-want-to-watch'], ['sass']);
});
If you want to just generate theme.scss when modifying the said files, you could add something like this, and add 'sass_theme' besides 'sass' in the gulp.watch above.
gulp.task('sass_theme', function() {
gulp.src('theme.scss')
.pipe(sass())
.pipe(gulp.dest(function(f) {
return f.base;
}))
});
Related
Is it possible to build an css file in dependency to my Theme folder? The problem is i have several themes in there with the same setup gulp should take Theme.scss and build an css file into Theme, Theme1 and so on.
gulp.task('sass', function () {
return gulp.src('Css/Clients/**/theme.scss') // Gets all files ending with .scss
.pipe(sass({outputStyle: 'compact'}))
.pipe(gulp.dest('app/css'))
.pipe(browserSync.reload({
stream: true
}))
});
gulp.task('watch', ['browserSync', 'sass', 'php'], function () {
gulp.watch('Css/**/*.scss', ['sass']);
})
Edit:
im tryed the solution below the problem i get looks like this :
but i need just the theme.css in theme folder ander theme1.css in theme1 folder and so on! any suggestions ?
gulp.task('sass', function () {
var folders = getFolders(scriptsPath);
var tasks = folders.map(function(folder) {
return gulp.src(path.join(scriptsPath, folder, '/**/*.scss'))
.pipe(sass({outputStyle: 'compact'}))
// concat into foldername.js
.pipe(concat(folder + '.css'))
// write to output
.pipe(gulp.dest(scriptsPath))
// write to output again
.pipe(gulp.dest(scriptsPath));
});
return merge(tasks);
console.log(folders);
});
You can specify multiple destinations like this:
gulp.task('sass', function () {
return gulp.src('Css/Clients/**/theme.scss') // Gets all files ending with .scss
.pipe(sass({outputStyle: 'compact'}))
.pipe(gulp.dest('app/css'))
.pipe(gulp.dest('app/Theme'))
.pipe(gulp.dest('app/Theme1'))
.pipe(browserSync.reload({
stream: true
}))
});
Got it thanks guys!
gulp.task('sass', function () {
var folders = getFolders(scriptsPath);
var tasks = folders.map(function(folder) {
return gulp.src(path.join(scriptsPath, folder, '/**/*.scss'))
.pipe(sass({outputStyle: 'compact'}))
// concat into foldername
.pipe(concat(folder + '.css'))
// write to output
.pipe(gulp.dest(scriptsPath+folder))
});
});
I'm using gulp uglify, and I'm getting an error.
this is my code:
var uglify = require('gulp-uglify');
var deleteLines = require('gulp-delete-lines');
// JS concat, strip debugging and minify
gulp.task('scripts', function() {
gulp.src(['./layout3/**/*.js','!./layout3/**/*.min.js'])
.pipe(deleteLines({
'filters': [/<script\s+type=["']text\/javascript["']\s+src=/i, /<script>/i]
}))
.pipe(uglify().on('error', function(e){
console.log(e);
}))
.pipe(gulp.dest('./layout2'));
});
I add print screen of the error:
I know that there is a problem in jquery.elevatezoom file, I can't find the problem.
thanks.
i got this error after update the 'gulp-uglify', in my case is the pipe was replaced by pump.
because the pump can show error detail, checkt this why use pump
so, maybe you can try this:
var pump = require('pump'); //npm install it first
gulp.task('cssmin', function (cb) {
pump([
gulp.src(['./layout3/**/*.js','!./layout3/**/*.min.js']),
deleteLines({'filters': [/<script\s+type=["']text\/javascript["']\s+src=/i, /<script>/i]}),
uglify().on('error', function(e){
console.log(e);
})
gulp.dest('./layout2')
],
cb
);});
it works on my project now, hope it can help.
I'm trying to utilize Browserify in my Gulp file, but it seems no matter how I set things up, it always throws an error that reads "dest.write is not a function". I originally started with this task using gulp-concat:
gulp.task('scripts', function()
{
return gulp.src(['src/shared/js/one.js', 'src/shared/js/two.js', 'src/shared/js/*.js'])
.pipe(browserify()
.pipe(concat('main.js'))
.pipe(gulp.dest('dist/js'))
.pipe(browserSync.stream());
});
When I commented out the browserify() line, everything worked fine. While Googling around for a solution to the error message, I found this page when someone linked to it, saying "the gulp docs rave about this solution" (here):
var gulp = require('gulp');
var browserify = require('browserify');
var transform = require('vinyl-transform');
var uglify = require('gulp-uglify');
gulp.task('browserify', function () {
var browserified = transform(function(filename) {
var b = browserify(filename);
return b.bundle();
});
return gulp.src(['./src/*.js'])
.pipe(browserified)
.pipe(uglify())
.pipe(gulp.dest('./dist'));
});
I dug further, and read that vinyl-transform doesn't work with Browserify in this way because there is no write stream, and the preferred method was to use vinyl-source-stream instead. I'm now currently trying to use this proposed solution, but still getting the error:
gulp.task('scripts', function()
{
return gulp.src(['src/shared/js/one.js', 'src/shared/js/two.js', 'src/shared/js/*.js'])
.pipe(browserify('src/shared/js/*.js', {
debug: true,
extensions: ['.js']
}))
.bundle()
.pipe(source('main.js'))
.pipe(buffer())
.pipe(gulp.dest('dist/js'))
.pipe(browserSync.stream());
});
Tweaking the browserify() reference in various ways has not changed anything. Can anyone tell me what I'm doing wrong?
Here's the solution that worked for me in exactly same situation.
I spent some time trying to make vinyl-transform work with browserify, without success, so had to revert to vinyl-source-stream and vinyl-buffer combination.
I used the following gist as a base reference for my code snippet:
https://gist.github.com/stoikerty/cfa49330a9609f6f8d2d
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var browserify = require('browserify');
var uglify = require('gulp-uglify');
gulp.task('browserify', function () {
var b = browserify({
entries: './js/test.js', // Only need initial file, browserify finds the deps
debug: true // Enable sourcemaps
});
return b.bundle()
.pipe(source('./js/test.js')) // destination file for browserify, relative to gulp.dest
.pipe(buffer())
.pipe(uglify())
.pipe(gulp.dest('./dist'));
});
The setup
I've followed this tutorial for installing Gulp and configuring a gulpfile.js to concatenate and minify JavaScript files. I am using a Windows7 machine. When I run the gulp command, I get this output:
There are no errors, but gulp.dest() doesn't create the expected "dist/js/MATRIX.min.js".
Here is my gulpfile:
/* based on http://sixrevisions.com/web-performance/improve-website-speed/ */
var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var concatcss = require('gulp-concat-css');
var concat = require('gulp-concat');
var jshint = require('gulp-jshint');
var imagemin = require('gulp-imagemin'),
svgmin = require('gulp-svgmin');
//gulp.task('default', ['css', 'js', 'img', 'svg', 'html'], function () {});
gulp.task('default', ['js'], function () {});
// CSS concatenation + minification task
gulp.task('css', function() {
return gulp.src('sourcecode/css/*.css')
.pipe(concatcss('semeano.min.css'))
.pipe(minifycss())
.pipe(gulp.dest('dist/css'));
});
// JS linting + minification + concatenation task
gulp.task('js', function() {
return gulp.src([
'sourcecode/js/agregate/modernizr.custom.08680.min.js',
'sourcecode/js/agregate/jquery.js',
'sourcecode/js/agregate/jquery-ui.js',
'sourcecode/js/agregate/bootstrap.js',
'sourcecode/js/agregate/jquery.dataTables.js',
'sourcecode/js/agregate/dataTables.tableTools.js',
'sourcecode/js/agregate/ZeroClipboard.js',
'sourcecode/js/agregate/DT_bootstrap.js',
'sourcecode/js/agregate/MATRIX_main.js'
])
.pipe(jshint())
.pipe(jshint.reporter("default"))
.pipe(uglify())
.pipe(concat('MATRIX.min.js'))
.pipe(gulp.dest('dist/js'));
});
// Image optimization task
gulp.task('img', function () {
return gulp.src('sourcecode/img/*.*')
.pipe(imagemin())
.pipe(gulp.dest('dist/img'));
});
// SVG optimization task
gulp.task('svg', function () {
return gulp.src('sourcecode/svg/*.svg')
.pipe(svgmin())
.pipe(gulp.dest('dist/svg'));
});
What I've tried
Figuring "I know how to do things", I did some research and came across this "Gulp suddenly not working anymore after npm update" issue, so I tried this suggestion:
Run: "npm install glob#4.2.2" //no problem
Run: "npm install" //now I get a bunch of errors:
What do I need to do at this point to get this working in my Windows environment?
From looking at the first screenshot and your code snippet, it looks like gulp.src() isn't finding the files you want to process. Check to see if you've got any typos like aggregate?
As for that github issue, it refers to an old version of gulp. Be sure you're using the latest version of gulp 3.9.0.
I copy the root dir to output dir, then minify css files, found the css files can't minify.
If i delete the copy dependence and run, that success. Why?
gulp.task('minifyCss', ['copy'], function() {
gulp.src('**/*.css')
.pipe(minifyCss())
.pipe(gulp.dest(dirOutput));
});
gulp.task('copy', function() {
gulp.src(['**/*', '!**/*.sh', '!{build,build/**}', '!**/*.js'])
.pipe(gulp.dest(dirOutput));
});
gulp.task('default', function() {
del(dirOutput, function() {
gulp.run('minifyCss');
});
});