When I launch gulp generates me the files, but when it enters the watch mode, understands that there was a change but does not overwrite files:
My gulp sample
var argv = require('yargs').argv;
var gulp = require('gulp');
var gulpif = require('gulp-if');
var uglify = require('gulp-uglify');
var dependencies = [
'core-js/client/*.min.js',
'zone.js/dist/zone.js',
'reflect-metadata/Reflect.js',
'systemjs/dist/system.src.js',
'rxjs/**/*.js',
'#angular/**/*.js',
'angular2-in-memory-web-api/*.js',
];
var modules = [
// Example: 'iconv-lite/**/*',
];
........
gulp.task("javascript", () => {
return gulp.src([
'./bower_components/jquery/dist/jquery.min.js',
'./bower_components/bootstrap/dist/js/bootstrap.min.js',
])
.pipe(gulp.dest("./build/js"))
});
gulp.task('styles', () => {
var postcss = require('gulp-postcss');
var autoreset = require('postcss-autoreset');
var simplevars = require('postcss-simple-vars');
var nested = require('postcss-nested');
var lost = require('lost');
var cssnext = require('postcss-cssnext');
var processors = [
simplevars(),
nested(),
lost(),
cssnext(),
];
return gulp.src([
'./src/css/*.css',
'./bower_components/openSans/openSans.css',
'./bower_components/components-font-awesome/css/font-awesome.min.css',
'./bower_components/bootstrap/dist/css/bootstrap.min.css',
])
.pipe(postcss(processors))
.pipe(gulp.dest('./build/css'));
});
gulp.task('ts', ['ts-app', 'ts-electron']);
gulp.task('build', ['templates', 'resources', 'styles', 'ts', 'libs', 'modules', 'images', 'javascript']);
gulp.task('watch', ['build'], () => {
gulp.watch('./src/app/**/*', ['ts-app']);
gulp.watch('./src/electron/**/*', ['ts-electron']);
gulp.watch('./src/resources/**/*', ['resources']);
gulp.watch('./src/css/**/*', ['styles']);
gulp.watch('./src/templates/**/*', ['templates']);
gulp.watch('./src/img/**/*', ['images']);
gulp.watch('./src/js/**/*', ['javascript']);
});
Platform: Win7x64
NPM: 3.10.8
NODE: v6.7.0
Gulp version:
{
"gulp": "^3.9.1",
"gulp-if": "^2.0.1",
"gulp-postcss": "^6.1.1",
"gulp-pug": "^3.0.3",
"gulp-typescript": "^2.13.6",
"gulp-uglify": "^1.5.4",
}
I also tried to manually put gulp.dest("./build/", {overwrite: true})(in all gulp.dest) but nothing change :/
What can I do to better understand the problem?
Related
I setted up my Gulpfile and so far it looked good. I had no errors anymore. Just looked a bit too fast as he compiled it. But if he would really do the job this wouldn't be any problem. But as i run my gulp css task it didn't compiled my SCSS files into CSS and also not created the minified, concatinated build file afterwards. I checked paths and searched for solutions in internet but this doesn't helped me further.
I had no errors. So why he don't do the job? Did i made a mistake in the gulpfile? I used for running the task async functions to avoid an error. But it seems it just let disappear errors but it doesn't work. Has anybody an idea what i need to change?
Thats what my console does after running gulp css:
[08:58:02] Using gulpfile C:\xampp\htdocs\united-in-faith\gulpfile.js
[08:58:02] Starting 'css'...
[08:58:02] Finished 'css' after 3.71 ms
Thats my gulpfile:
const { src, dest, watch, task, series, parallel } = require('gulp');
var sass = require('gulp-sass');
var minifyCss = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var minifyPhp = require('gulp-php-minify');
var sourcemaps = require('gulp-sourcemaps');
var scssOrigin = './scripts/scss/**/_*.scss';
var jsOrigin = './scripts/js/*.js';
var cssFilePath = './scripts/css/**/_*.css';
var jsDestination = './build/scripts/js';
var cssDestination = './scripts/scripts/css';
var cssDestinationMin = './build/scripts/css';
var jsDestinationMin = './build/scripts/js';
var phpDestination = './build';
var htmlDestination = './build';
var appCssMin = 'app.min.css';
var appJsMin = 'app.min.js';
var appJs = 'app.js';
var appCss = 'app.css';
var watchJs = './scripts/js/**/_*.js';
var watchCss = './scripts/scss/**/_*.scss';
function js(done) {
src(jsOrigin)
.pipe(concat({ path: appJsMin}))
.pipe(uglify())
.pipe(dest(jsDestinationMin));
done();
}
function css(done) {
var processors = [
autoprefixer,
];
src(scssOrigin, { sourcemaps: true})
.pipe(sourcemaps.init())
.pipe(sass({ outputStyle: "expanded" }).on('error', sass.logError))
.pipe(sourcemaps.write('./maps'))
.pipe(postcss(processors))
.pipe(dest(cssDestination));
src('scripts/scss/main.scss', { sourcemaps: true})
.pipe(sass({ outputStyle: "expanded" }).on('error', sass.logError))
.pipe(dest('scripts/css'));
done();
}
function minifyCss (done) {
return src(cssFilePath, { sourcemaps: true})
.pipe(sourcemaps.init())
.pipe(minifyCss({compatibility: 'ie8'}))
.pipe(concat(appCssMin))
.pipe(sourcemaps.write('./maps'))
.pipe(dest(cssDestinationMin));
}
/*function cssNoMin (done) {
var processors = [
autoprefixer,
];
src(scssOrigin, { sourcemaps: true})
.pipe(sass({ outputStyle: "expanded" }).on('error', sass.logError))
.pipe(postcss(processors))
.pipe(dest(cssFilePath));
src(cssFilePath, { sourcemaps: true})
.pipe(concat(appCss))
.pipe(dest(scssDestinationMin))
.pipe(browserSync.stream());
done();
}
*/
function jsNoMin (done) {
src(jsOrigin)
.pipe(concat({ path: appJs }))
.pipe(dest(jsDestinationMin))
.pipe(browserSync.stream());
done();
}
function browserSyncServer (done) {
browserSync.init({
open: false,
injectChanges: true,
server: { //server variable set elsewhere
baseDir: './',
proxy: "https://localhost/united-in-faith",
port: 8080,
online: true
},
ui: {
port: 8082
}
});
done();
}
function browserSyncReload (done) {
browserSync.reload();
done();
}
function publishPhp () {
return src('sites/**/*php')
.pipe(dest(phpDestination));
src('sites/**/*html')
.pipe(dest(phpDestination));
}
function watch_files () {
watch('*.php', browserSyncReload);
watch([watchJs,watchCss], series(css,minifyCss, js, browserSyncReload))
.on('error', function (err) {
console.log(err.toString());
this.emit('end');
});
}
function watchNoMin () {
watch('*.php', browserSyncReload);
watch([watchJs,watchCss], series(css, jsNoMin , browserSyncReload))
.on('error', function (err) {
console.log(err.toString());
this.emit('end');
});
}
task("default", async function() {
series(css,minifyCss,js,browserSyncServer);
});
task("css", async function() {
series(css,minifyCss,browserSyncServer);
});
task("js", async function() {
series(js,browserSyncServer);
});
task("publish", async function() {
series(css, minifyCss,js,publishPhp,browserSyncServer);
});
task("watch", series(watch_files, browserSyncServer));
task("watch-no-min", series(watchNoMin, browserSyncServer));
task("all", parallel(css,js));
task("css-no-min", css);
task("js-no-min", js);
Thats my dependencies of Package.json
"dependencies": {
"lodash": "^4.17.21",
"#fortawesome/fontawesome-pro": "^6.0.0-beta1",
"bootstrap": "^5.0.1",
"bootstrap-icons": "^1.5.0",
"ckeditor4": "^4.16.1",
"cookieconsent": "^3.1.1",
"emojione": "^4.5.0",
"gulp-php-minify": "^0.1.3",
"jquery": "^3.6.0",
"jquery-ui": "^1.12.1",
"jquery-ui-touch-punch": "^0.2.3"
},
"devDependencies": {
"q": "^1.5.1",
"autoprefixer": "^10.2.6",
"browser-sync": "^2.26.14",
"chokidar": "^3.5.2",
"debug": "^4.3.1",
"gulp": "^4.0.2",
"gulp-clean-css": "^4.3.0",
"gulp-cli": "^2.3.0",
"gulp-concat": "^2.6.1",
"gulp-postcss": "^9.0.0",
"gulp-sass": "^4.1.0",
"gulp-sourcemaps": "^3.0.0",
"gulp-uglify": "^3.0.2",
"gulp-watch": "^5.0.1",
"webpack": "^5.40.0",
"webpack-cli": "^4.7.2"
}
I have implementing gulp task in the project.
I have installed gulp-assests-version-replace to make version control file of css file.
Now I want to run above task after creating the app.css. It runs before creating the app.css, so version control file cannot be created.
Below is the gulp-file for running the gulp tasks.
var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
var changed = require('gulp-changed');
var concat = require('gulp-concat');
var del = require('del');
var gulpif = require('gulp-if');
var gutil = require('gulp-util');
var imagemin = require('gulp-imagemin');
var jshint = require('gulp-jshint');
var notify = require('gulp-notify');
var plumber = require('gulp-plumber');
var rename = require('gulp-rename');
var sass = require('gulp-sass');
var assetsVersionReplace = require('gulp-assets-version-replace');
var uglify = require('gulp-uglify');
var path = {
assets: 'skin/frontend/custom_theme/default/'
};
var config = {
tasks: {
css: {
autoprefixerOptions: {
// For "browserslist" see "package.json"
cascade: false,
supports: false // See: https://github.com/filamentgroup/select-css/issues/17
},
dest: path.assets + 'css/build',
sassOptions: {
outputStyle: 'compressed'
},
src: path.assets + 'css/src/**/*.scss'
},
version: {
autoprefixerOptions: {
// For "browserslist" see "package.json"
cascade: false,
supports: false // See: https://github.com/filamentgroup/select-css/issues/17
},
dest: path.assets + 'css/build',
sassOptions: {
outputStyle: 'compressed'
},
src: path.assets + 'css/build/app.css'
}
}
}
gulp.task('default', ['clean'], function () {
gulp.start('css');
gulp.start('assetsVersionReplace');
});
gulp.task('clean', function () {
return del([
path.assets + 'css/build',
path.assets + 'js/build',
path.assets + 'js/min',
path.assets + 'img/build'
]);
});
gulp.task('css', function () {
return gulp.src(config.tasks.css.src)
.pipe(plumber({
errorHandler: reportError
}))
.pipe(sass(config.tasks.css.sassOptions))
.pipe(autoprefixer(config.tasks.css.autoprefixerOptions))
.pipe(gulp.dest(config.tasks.css.dest));
});
gulp.task('assetsVersionReplace', function () {
return gulp.src(config.tasks.version.src)
.pipe(assetsVersionReplace({
replaceTemplateList: [
'app/design/frotend/custom_theme/default/template/page/head.phtml'
]
}))
.pipe(gulp.dest(config.tasks.version.dest))
});
gulp.task('watch', function () {
// Run "default" immediately
gulp.start('default');
// CSS
gulp.watch(config.tasks.css.src, ['css']);
gulp.watch(config.tasks.version.src, ['assetsVersionReplace']);
});
How can I run assetsVersionReplace task after creating the css (or after runnung 'CSS' task)?
Either change
gulp.task('assetsVersionReplace', function () {
to
gulp.task('assetsVersionReplace', ['css'], function () {
or, if that isn't an option, add a helper task
gulp.task('assetsVersionReplaceAfterCss', ['css'], function () {
gulp.start('assetsVersionReplace');
}
and use that instead
Why don't you use gulp series.
gulp.task('default',
gulp.series(
'css',
'assetsVersionReplace'
)
);
My gulp runs with no errors, but does not pick up any changes to the SASS. If I stop gulp and re-run, it compiles the sass fine. Here is my gulp file.
var gulp = require('gulp'),
gutil = require('gulp-util'),
browserify = require('gulp-browserify'),
concat = require('gulp-concat');
gulpif = require('gulp-if');
uglify = require('gulp-uglify');
bower = require('gulp-bower');
sass = require('gulp-sass');
imagemin = require('gulp-imagemin');
pngcrush = require('imagemin-pngcrush');
livereload = require('gulp-livereload');
// Create gulp plugins from node install
// npm install --save-dev gulp-**
var jsSources,
sassSources,
outputDir,
sassStyle
// Create variables for enviroments
env = process.env.NODE_ENV || 'development';
if (env==='development') {
outputDir = './';
sassStyle = 'expanded';
} else {
outputDir = './';
sassStyle = 'compressed';
}
// Conditions for development and production enviroments
jsSources = ['js/*.js'];
sassSources = ['scss/style.scss'];
imageSources = ['images/**/*.*'];
bowerDir = ['bower_components/'];
// Paths to files
gulp.task('js', function() {
gulp.src(jsSources)
.pipe(concat('scripts.js'))
.pipe(browserify())
.pipe(gulpif (env === 'production', uglify()))
.pipe(gulp.dest('./'))
});
// Concat all javascript files
gulp.task('images', function() {
gulp.src(imageSources)
.pipe(gulpif (env === 'production', imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngcrush()]
})))
.pipe(gulpif (env === 'production', gulp.dest(outputDir + 'images')))
});
// Compress all images
gulp.task('css', function() {
gulp.src(sassSources)
.on('error', function(error) {
console.log('Error: ' + error.message);
})
.pipe(sass({outputStyle: sassStyle})
.on('error', sass.logError)
)
.pipe(gulp.dest(outputDir));
});
gulp.task('watch', function() {
livereload.listen()
gulp.watch(jsSources, ['js']);
gulp.watch(imageSources, ['images']);
gulp.watch('scss/*.scss', ['css']);
});
// Watch task, looks for changes and automatically updates.
gulp.task('default', ['js', 'css', 'images', 'watch']);
// Runs all tasks
Can anyone see anything that would cause this issue for me?
I used this gulp file until recently. Now everything still works, the CSS still gets compiled except injecting the compiled CSS back into the browser.
Thanks for your time!
var gulp = require('gulp');
var gutil = require('gulp-util');
var bs = require('browser-sync').create();
// Include plugins
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var less = require('gulp-less');
var minifycss = require('gulp-clean-css');
var streamqueue = require('streamqueue');
gulp.task('bs', function () {
var files = [
'libraries/file1.css',
];
bs.init(files, {
proxy: 'localhost',
port: '80',
baseDir: './',
startPath: 'joomla'
})
gulp.watch("libraries/file1.css", ['fcss']);
});
gulp.task('fcss', function() {
var themes = ['.theme1','.theme2', '.theme3'];
themes.forEach( function(theme) {
return gulp.src(['libraries/'+theme+'.css',
'libraries/file1.css'
])
.pipe(concat('style'+theme+'.css'))
.pipe(gulp.dest('media/css'))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss({advanced:false, keepSpecialComments : 0}))
.pipe(gulp.dest('media/css'))
.pipe(bs.stream());
});
});
Try running browsersync before you minify css:
gulp.task('fcss', function() {
var themes = ['.theme1','.theme2', '.theme3'];
themes.forEach( function(theme) {
return gulp.src(['libraries/'+theme+'.css',
'libraries/file1.css'
])
.pipe(concat('style'+theme+'.css'))
.pipe(bs.stream())
.pipe(gulp.dest('media/css'))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss({advanced:false, keepSpecialComments : 0}))
.pipe(gulp.dest('media/css'));
});
});
I'm working with a small project using gulp and I want to learn about vue.js, so I want to use vue.js in this project, but I don't know how to configure vue.js in the gulpfile.js
I want to know how to configure gulpfile to use vue.js
My gulpfile.js
var env = require('minimist')(process.argv.slice(2)),
gulp = require('gulp'),
gutil = require('gulp-util'),
plumber = require('gulp-plumber'),
jade = require('gulp-jade'),
browserify = require('gulp-browserify'),
browserSync = require('browser-sync'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
gulpif = require('gulp-if'),
stylus = require('gulp-stylus'),
jeet = require('jeet'),
rupture = require('rupture'),
koutoSwiss = require('kouto-swiss'),
prefixer = require('autoprefixer-stylus'),
modRewrite = require('connect-modrewrite'),
imagemin = require('gulp-imagemin'),
karma = require('gulp-karma'),
cache = require('gulp-cache'),
rsync = require('rsyncwrapper').rsync;
// Call Jade for compile Templates
gulp.task('jade', function () {
return gulp.src('src/templates/*.jade')
.pipe(plumber())
.pipe(jade({pretty: !env.p}))
.pipe(gulp.dest('build/'));
});
gulp.task('copy', function() {
return gulp.src(['src/*.html', 'src/*.txt'])
.pipe(gulp.dest('build/'))
});
// Call Uglify and Concat JS
gulp.task('js', function () {
return gulp.src('src/js/**/*.js')
.pipe(plumber())
.pipe(concat('main.js'))
.pipe(gulpif(env.p, uglify()))
.pipe(gulp.dest('build/js'));
});
// Call Uglify and Concat JS
gulp.task('browserify', function () {
return gulp.src('src/js/main.js')
.pipe(plumber())
.pipe(browserify({debug: !env.p}))
.pipe(gulpif(env.p, uglify()))
.pipe(gulp.dest('build/js'));
});
// Call Stylus
gulp.task('stylus', function () {
gulp.src('src/styl/main.styl')
.pipe(plumber())
.pipe(stylus({
use:[koutoSwiss(), prefixer(), jeet(), rupture()],
compress: env.p,
}))
.pipe(gulp.dest('build/css'));
});
// Call Imagemin
gulp.task('imagemin', function () {
return gulp.src('src/img/**/*')
.pipe(plumber())
.pipe(cache(imagemin({optimizationLevel: 3, progressive: true, interlaced: true})))
.pipe(gulp.dest('build/img'));
});
// Call Watch
gulp.task('watch', function () {
gulp.watch('src/templates/**/*.jade', ['jade']);
gulp.watch('src/styl/**/*.styl', ['stylus']);
gulp.watch('src/js/**/*.js', [(env.fy) ? 'browserify' : 'js']);
gulp.watch('src/img/**/*.{jpg,png,gif}', ['imagemin']);
});
gulp.task('browser-sync', function () {
var files = [
'build/**/*.html',
'build/css/**/*.css',
'build/img/**/*',
'build/js/**/*.js',
];
browserSync.init(files, {
server: {
baseDir: './build/',
},
});
});
// Rsync
gulp.task('deploy', function () {
rsync({
ssh: true,
src: './build/',
dest: 'user#hostname:/path/to/www',
recursive: true,
syncDest: true,
args: ['--verbose'],
},
function (erro, stdout, stderr, cmd) {
gutil.log(stdout);
});
});
// Default task
gulp.task('default', [(env.fy) ? 'browserify' : 'js', 'jade', 'copy', 'stylus', 'imagemin', 'watch', 'browser-sync']);
// Build and Deploy
gulp.task('build', [(env.fy) ? 'browserify' : 'js', 'jade', 'copy', 'stylus', 'imagemin', 'deploy']);
Vueify is a browserify transform; gulp-browserify isn't maintained anymore but I assume that you can still add vueify as a transform once it's installed:
gulp.task('browserify', function () {
return gulp.src('src/js/main.js')
.pipe(plumber())
.pipe(browserify({
debug: !env.p,
transform: ['vueify']
}))
.pipe(gulpif(env.p, uglify()))
.pipe(gulp.dest('build/js'));
});
Check this out:
This is a package which lets you setup gulp task for vue.js.
https://www.npmjs.com/package/gulp-vueify
Using:
.pipe(babel({presets: ['es2015']}))
On a normal gulp task helped me concat and uglify my vue.js files.
If this is what you meant, then you will also need to install babel with npm and add:
var babel = require('gulp-babel');