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');
});
});
Related
Gulp watch runs only once on the first change. I am running Wordpress on apache2 on ubuntu 14 and am using a tutorial. It illustrates how to use gulp to watch for changes. It works okay for the first change - refreshes the browser which is http://localhost:3000. I'm pretty much new to setting up gulp watch so I am at a loss as to why it only runs once. The gulpfile.js is as follows. If anyone needs anything else to clarify please get back. Thanks
I have done the coding version of turning it off and on again. I have looked through various responses for this type of issue on stackoverflow and other places.
var gulp = require('gulp'),
settings = require('./settings'),
webpack = require('webpack'),
browserSync = require('browser-sync').create(),
postcss = require('gulp-postcss'),
rgba = require('postcss-hexrgba'),
autoprefixer = require('autoprefixer'),
cssvars = require('postcss-simple-vars'),
nested = require('postcss-nested'),
cssImport = require('postcss-import'),
mixins = require('postcss-mixins'),
colorFunctions = require('postcss-color-function');
gulp.task('styles', function() {
return gulp.src(settings.themeLocation + 'css/style.css')
.pipe(postcss([cssImport, mixins, cssvars, nested, rgba, colorFunctions, autoprefixer]))
.on('error', (error) => console.log(error.toString()))
.pipe(gulp.dest(settings.themeLocation));
});
gulp.task('scripts', function(callback) {
webpack(require('./webpack.config.js'), function(err, stats) {
if (err) {
console.log(err.toString());
}
console.log(stats.toString());
callback();
});
});
gulp.task('watch', function() {
browserSync.init({
notify: false,
proxy: settings.urlToPreview,
ghostMode: false
});
gulp.watch('./**/*.php', function() {
browserSync.reload();
});
gulp.watch(settings.themeLocation + 'css/**/*.css', gulp.parallel('waitForStyles'));
gulp.watch([settings.themeLocation + 'js/modules/*.js', settings.themeLocation + 'js/scripts.js'],
gulp.parallel('waitForScripts'));
});
gulp.task('waitForStyles', gulp.series('styles', function() {
return gulp.src(settings.themeLocation + 'style.css')
.pipe(browserSync.stream());
}))
gulp.task('waitForScripts', gulp.series('scripts', function(cb) {
browserSync.reload();
cb()
}))
I expect the browser view and functionality to be updated with every change of code. This only happens once after starting gulp with 'gulp watch'.
A gulp task that will only run once usually indicates that gulp is unable to determine that it has finished the first time and so gulp will not run it again.
Change to this code:
// notice the "done" added below
gulp.task('watch', function(done) {
browserSync.init({
notify: false,
proxy: settings.urlToPreview,
ghostMode: false
});
// I also added a callback function below, just within this one gulp.watch
gulp.watch('./**/*.php', function(done) {
browserSync.reload();
done();
});
gulp.watch(settings.themeLocation + 'css/**/*.css', gulp.parallel('waitForStyles'));
gulp.watch([settings.themeLocation + 'js/modules/*.js', settings.themeLocation + 'js/scripts.js'],
gulp.parallel('waitForScripts'));
done();
});
I have also seen it suggested to use this form of watch statement:
gulp.watch('src/pages/**/*.html').on('change',gulp.series(pages, browser.reload));
instead of the commonly used:
gulp.watch('src/pages/**/*.html', gulp.series(pages, browserSync.reload));
So if the callback solution didn't work, try using the suggested form of watch.
Under the rules for stackoverflow, my reputation is too low to tell you that Mark's answer worked for me under the comments to his answer, so I'll add it here. We added gulp to the Udemy course I'm taking and this has been a stumbling block for many users on that site.
Someone else will have to mark it as a correct answer. Probably gulp.js should be modified to take this use case into account, but this is my first time using it. Thanks Mark.
Hello everyone i am in the same situation. I am running Wordpress on mamp pro. the answer from mark work for the html change but i stil get stop for Css en JS
If somebody can helping it wil be great tx.
My gulpfiles is:
var gulp = require('gulp'),
settings = require('./settings'),
webpack = require('webpack'),
browserSync = require('browser-sync').create(),
postcss = require('gulp-postcss'),
rgba = require('postcss-hexrgba'),
autoprefixer = require('autoprefixer'),
cssvars = require('postcss-simple-vars'),
nested = require('postcss-nested'),
cssImport = require('postcss-import'),
mixins = require('postcss-mixins'),
colorFunctions = require('postcss-color-function');
gulp.task('styles', function() {
return gulp.src(settings.themeLocation + 'css/style.css')
.pipe(postcss([cssImport, mixins, cssvars, nested, rgba, colorFunctions, autoprefixer]))
.on('error', (error) => console.log(error.toString()))
.pipe(gulp.dest(settings.themeLocation));
});
gulp.task('scripts', function(callback) {
webpack(require('./webpack.config.js'), function(err, stats) {
if (err) {
console.log(err.toString());
}
console.log(stats.toString());
callback();
});
});
gulp.task('watch', function(done) {
browserSync.init({
notify: false,
proxy: settings.urlToPreview,
ghostMode: false
});
gulp.watch('./**/*.php', function(done) {
browserSync.reload();
done();
});
gulp.watch(settings.themeLocation + 'css/**/*.css', gulp.parallel('waitForStyles'));
gulp.watch([settings.themeLocation + 'js/modules/*.js', settings.themeLocation + 'js/scripts.js'], gulp.parallel('waitForScripts'));
});
gulp.task('waitForStyles', gulp.series('styles', function() {
return gulp.src(settings.themeLocation + 'style.css')
.pipe(browserSync.stream());
}))
gulp.task('waitForScripts', gulp.series('scripts', function(cb) {
browserSync.reload();
cb()
}))
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;
}))
});
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 starting to work with gulp. I have electron app that is invoked by a gulp process. The thing is that I wan't to be able to see the console.logs of the main.js process into the console where the gulp command was executed.
I'm able to see the console.logs of all the render processes in the dev tools.
My gulpfile is:
var gulp = require('gulp'),
browserify = require('gulp-browserify'),
concatCss = require('gulp-concat-css'),
run = require('gulp-run');
var src = './process',
app = './app';
gulp.task('js', function () {
return gulp.src(src + '/js/render.js')
.pipe(browserify({
transform: 'reactify',
extensions: 'browserify-css',
debug: true
}))
.on('error', function (err) {
console.error('Error!', err.message);
})
.pipe(gulp.dest(app + '/js'));
});
gulp.task('html', function () {
gulp.src(src + '/**/*.html');
});
gulp.task('css', function () {
gulp.src(src + '/css/*.css')
.pipe(concatCss('app.css'))
.pipe(gulp.dest(app + '/css'));
});
gulp.task('fonts', function () {
gulp.src('node_modules/bootstrap/dist/fonts/**/*')
.pipe(gulp.dest(app + '/fonts'));
});
gulp.task('watch', ['serve'], function () {
gulp.watch(src + '/js/**/*', ['js']);
gulp.watch(src + '/css/**/*.css', ['css']);
gulp.watch([app + '/**/*.html'], ['html']);
});
gulp.task('serve', ['html', 'js', 'css'], function () {
run('electron app/main.js').exec();
});
gulp.task('default', ['watch', 'fonts', 'serve']);
Any idea of what to do?
The verbosity option for gulp-run could be what you are looking for. It defaults to 2, which means that the output from electron just gets buffered and printed after you quit the app. Setting it to 3 should print your console.logs as soon as they come in.
gulp.task('serve', ['html', 'js', 'css'], function () {
run('electron app/main.js', {verbosity: 3}).exec();
});
I am new to Gulp. I have two tasks:
gulp.task('jadehtml', function() {
var YOUR_LOCALS = {};
gulp.src('source/jade/*.jade')
.pipe(jade({
locals: YOUR_LOCALS,
pretty: true
}))
.pipe(gulp.dest('build'))
});
// End Gulp Jade
// default task
// sass
gulp.task('sass', function () {
return gulp.src('source/scss/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('build/css'));
});
Now they work perfectly fine when run individually. But when I use the gulp.watch() command they give me an error. Here is my watch task:
gulp.task('watch', function() {
gulp.watch('source/jade/*.jade', 'jadehtml');
gulp.watch('source/scss/*.scss', 'sass');
});
This is the error:
The tasks parameter that you pass to gulp.watch() always has to be an array, even if it's just one task. So instead of this:
gulp.watch('source/jade/*.jade', 'jadehtml');
gulp.watch('source/scss/*.scss', 'sass');
You need to do this:
gulp.watch('source/jade/*.jade', ['jadehtml']);
gulp.watch('source/scss/*.scss', ['sass']);