How to clean all directories and files except of custom-scripts directory and all js files in this directory using gulp?
"devDependencies": {
"gulp": "^3.9.0",
"gulp-bower": "0.0.10",
"rimraf": "2.2.8",
"gulp-concat": "2.5.2",
"gulp-uglify": "1.2.0",
"gulp-connect": "2.2.0",
"gulp-clean": "0.3.1"
}
This tasks removes files in custom-scripts folder
gulp.task('clean', function () {
return gulp.src(['./Scripts/lib', '!./Scripts/lib/custom-scripts', '!./Scripts/lib/custom-scripts/*.js'], { read: false })
.pipe(clean());
})
replacing clean() with gulp-rimraf and gulp-ignore solved this problem.
"devDependencies": {
"gulp": "^3.9.0",
"gulp-bower": "0.0.10",
//"rimraf": "2.2.8",
"gulp-concat": "2.5.2",
"gulp-uglify": "1.2.0",
"gulp-clean": "0.3.1",
"gulp-ignore": "^2.0.1",
"gulp-rimraf": "^0.2.0"
}
var gulp = require("gulp");
var rimraf = require("gulp-rimraf");
var bower = require('gulp-bower');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var ignore = require('gulp-ignore');
gulp.task('clean', function () {
return gulp.src('./Scripts/lib', { read: false })
.pipe(ignore('./Scripts/lib/custom-scripts/**'))
.pipe(rimraf());
});
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"
}
So I want to connect browsersync to a site I don't have any control over. Basically I want it to replace a css file on the live site with a css file on my computer (which gets compiled from a bunch of less files). When that local css file is changed then browsersync should inject the css like it normally would. I'm using browsersync with gulp since I also want to have other tasks run.
The code below will open gulpjs.com and correctly match main.css from gulpjs.com and attempt to serve something in it's place. But all I'm getting is a 404 for the main.min.css. It's looking for it here
http://localhost:3000/css/main.min.css
I zipped up the test project (node modules not included) you can download it here - https://www.dropbox.com/s/5x5l6bbxlwthhoo/browsersyncTest.zip?dl=0
Here's what I have so far...
Project Structure
css/ main.min.css (compiled from app.less)
less/ app.less
gulpfile.js
package.json
package.json
{
"name": "browsersyncTest",
"devDependencies": {
"autoprefixer": "^6.7.0",
"browser-sync": "^2.18.6",
"cssnano": "^3.10.0",
"gulp": "^3.9.1",
"gulp-clean-css": "^2.3.2",
"gulp-less": "^3.3.0",
"gulp-postcss": "^6.3.0",
"gulp-rename": "^1.2.2",
"gulp-uglify": "^2.0.0",
"gulp-watch": "^4.3.11"
}
}
gulpfile.js
var gulp = require('gulp');
var less = require('gulp-less');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');
var cleancss = require('gulp-clean-css');
var rename = require('gulp-rename');
var watch = require('gulp-watch');
var browserSync = require('browser-sync').create();
gulp.task('default', function() {
});
gulp.task('less', function () {
var plugins = [autoprefixer({browsers: ['last 2 versions', 'ie >= 10']})];
return gulp.src('less/app.less')
.pipe(less())
.pipe(rename('main.min.css'))
//.pipe(postcss(plugins))
//.pipe(cleancss())
.pipe(gulp.dest('css'))
.pipe(browserSync.stream());
});
gulp.task('watch', ['less'], function () {
browserSync.init({
proxy: "http://gulpjs.com/",
files: ['css/**'],
serveStatic: ['css'],
rewriteRules: [{
match: new RegExp('css/main.css'),
fn: function() {
return 'css/main.min.css';
}
}]
});
gulp.watch('less/**/*.less', ['less']);
});
Thanks a bunch!
Got it all figured out.
Here's the updated code.
browserSync.init({
proxy: "http://gulpjs.com/",
rewriteRules: [
{
match: new RegExp("css/main.css"),
fn: function() {
return "main.min.css"
}
}
],
files: "css/*.css",
serveStatic: ['./css']
});
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?
I'm trying to get my Gulp File working.
Currently it isn't detecting any of my html, sass or JS changes. SASS and JS isn't compiling into the assets folder - this was working until I began to use browserSync... I did have it detecting the html changes but now that isn't working either after I tried to make my gulpfile more efficient.
I need some experienced eyes to see what am I doing wrong below...
package.json
{
"devDependencies": {
"gulp": "latest",
"gulp-util": "latest",
"gulp-sass": "latest",
"gulp-uglify": "latest",
"gulp-concat": "latest",
"gulp-connect-php": "latest",
"gulp-rename": "latest",
"browser-sync": "latest"
}
}
gulpfile.js
var gulp = require('gulp'),
gutil = require('gulp-util'),
sass = require('gulp-sass'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
rename = require('gulp-rename'),
connect = require('gulp-connect-php'),
browserSync = require('browser-sync');
// Change these values
var jsSources = ['assets/scripts/*.js'],
sassSources = ['assets/sass/*.scss'],
sassSources = ['**/*.php'],
outputDir = 'assets',
virtualHost = 'annual-review-2016.dev';
// Log Errors
gulp.task('log', function() {
gutil.log('== My Log Task ==')
});
// Manage CSS
gulp.task('sass', function() {
gulp.src('sassSources')
.pipe(sass({style: 'expanded'}))
.pipe(concat('app.css'))
.on('error', gutil.log)
.pipe(gulp.dest('outputDir'))
});
// Manage JS
gulp.task('js', function(){
return gulp.src('jsSources')
.pipe(concat('app.js'))
.pipe(uglify())
.on('error', gutil.log)
.pipe(gulp.dest('outputDir'));
});
// Live Reload in Browser
gulp.task('connect-sync', function() {
connect.server({}, function (){
browserSync({
proxy: 'annual-review-2016.dev'
});
});
});
// Watch the Styles and Scripts on Save
gulp.task('watch', function() {
gulp.watch('sassSources', ['sass']);
gulp.watch('jsSources', ['js']);
gulp.watch('phpSources').on('change', function () {
browserSync.reload();
});
});
gulp.task('default', ['js', 'sass', 'connect-sync', 'watch']);
You have duplicate declaration of sassSources
You need to remove quotation mark in gulp.dest('outputDir'), otherwise gulp will write the output to /outputDir instead of /assets
And for auto-reloading you need to include .pipe(browserSync.reload({stream: true})); at the bottom of your pipe chain (under gulp.dest in 'sass' task for example).
I am getting this error when I am minifying and bundling some js libraries with a gulp script (I am replicating the Hot Towel Angular nuget package from John Pappa).
site.min.js:81109 Uncaught ReferenceError: require is not defined
Here is the bower.json file
{
"name": "chainmanagerprovider",
"private": true,
"dependencies": {
"jQuery": "^3.1.0",
"jquery-validation": "^1.15.1",
"jquery-validation-unobtrusive": "^3.2.6",
"modernizr": "^3.3.1",
"bootstrap": "^3.3.7",
"respond": "respond-minmax#^1.4.2",
"angular": "^1.5.8",
"angular-animate": "^1.5.8",
"angular-mocks": "^1.5.8",
"angular-sanitize": "^1.5.8",
"angular-ui-router": "^0.3.1",
"moment": "^2.14.1",
"spin": "^1.1.6",
"toastr": "^2.1.3",
"font-awesome": "font-awsome#^4.6.3",
"jquery": "^3.1.0",
"angular-route": "^1.5.8",
"angular-bootstrap": "^2.1.2",
"install": "^1.0.4",
"spin.js": "spin-js#^2.0.1",
"ui-bootstrap": "^2.1.2"
},
"resolutions": {
"jquery": "3.1.0"
}
}
and my gulpfile.js
var gulp = require('gulp'),
concat = require("gulp-concat"),
cssmin = require("gulp-cssmin"),
debug = require("gulp-debug"),
uglify = require("gulp-uglify"),
filter = require("gulp-filter"),
mainBowerFiles = require('main-bower-files');
var flatten = require('gulp-flatten');
var paths = {};
paths.baseReleaseFolder = "Bundle";
paths.baseJSReleaseFile = "js/site.min.js";
paths.baseCSReleaseFile = "css/site.min.css";
paths.jsSource = mainBowerFiles()//this gets all your bower scripts in an array
.concat([
"Scripts/spcontext.js",//generated by MY typescript compiler
"!/Scripts", //this is an exclude
"!**/*.min.js" //also an exclude
]);
gulp.task("min:js", function () {
var jsFilter = filter('**/*.js', { restore: true });//extra file safty incase my glob is getting non js files somehow
return gulp
.src(paths.jsSource) //this is the 'glob' IE the file selector
.pipe(jsFilter) //enforce my filter from above (gulp-filter)
.pipe(debug()) //useful to output what files are in use (gulp-debug)
.pipe(uglify()) //min and ugilfy files on the way to next step (gulp-uglify)
.pipe(concat(paths.baseReleaseFolder + "/" + paths.baseJSReleaseFile)) //this takes all the files in the glob and creates a single file out of them in app/site.min.js
.pipe(gulp.dest(".")) //write the final site.min.js to its location
.pipe(jsFilter.restore); //not sure but all filter examples do this.
});
gulp.task("min:css", function () {
var cssFilter = filter('**/*.css', { restore: true });
return gulp
.src(['bower_components/**/*.css', 'Content/**/*.css', "!bower_components/**/*.min.css", '!Content/**/*.min.css'])
.pipe(flatten())
.pipe(debug())
.pipe(cssmin())
.pipe(concat(paths.baseReleaseFolder + "/" + paths.baseCSReleaseFile))
.pipe(gulp.dest("."))
.pipe(cssFilter.restore);
});
gulp.task("fontawesome", function () {
return gulp
.src('bower_components/font-awesome/fonts/*')
.pipe(flatten())
.pipe(debug())
.pipe(gulp.dest("Bundle/fonts"))
});
gulp.task("bundle", ["min:css", "min:js", "fontawesome"]);
The script does all the bundling as expected and the files are there. When I run the page, I get the above error at this line
require('./dist/ui-bootstrap-tpls');
I am using Angular bootstrap and it seems I need an additional step to handle this library. I have read around on browserify, but I am having a trouble grasping what I need to do to my script.