Gulp deleting CSS in html file - html

Question

I have a HTML file with all the scripts and stylesheets that I use in my Web App. When I add a new, custom CSS, and I run gulp, it automatically deletes that new line from the HTML file. My web application is an angular app.
<!-- MATERILIZE CORE CSS-->
<link href="../../common/vendors/Materialize/dist/css/materialize.css" rel="stylesheet"/>
<!-- MAIN STYLE -->
<link href="views/modules/main/min/custom-min.css" rel="stylesheet"/>
<!-- END MAIN STYLE -->
UPDATE 1
this is my gulpfile
( function () {
'use strict';
var //Required
args = require( 'yargs' ).argv,
spawn = require( 'child_process' ).spawn,
cssmin = require( 'gulp-cssnano' ),
concat = require( 'gulp-concat' ),
del = require( 'del' ),
echo = require( 'cli-color' ),
gulp = require( 'gulp' ),
gulpif = require( 'gulp-if' ),
linker = require( 'gulp-linker' ),
ngAnnotate = require( 'gulp-ng-annotate' ),
rename = require( 'gulp-rename' ),
runSequence = require( 'run-sequence' ).use( gulp ),
sass = require( 'gulp-ruby-sass' ),
sourcemaps = require( 'gulp-sourcemaps' ),
uglify = require( 'gulp-uglify' ),
shell = require( 'gulp-shell' ),
node,
// Client FOLDERS
client = {
ROOT: 'web/client/',
SRC_SCSS: 'web/client/source/sass',
EXPORT_CSS: 'web/client/public/css',
SRC_JS: 'web/client/source/js',
EXPORT_JS: 'web/client/public/js'
},
// Dashboard FOLDERS
dashboard = {
ROOT: 'web/dashboard/',
SRC_SCSS: 'web/dashboard/source/sass',
EXPORT_CSS: 'web/dashboard/static/css',
SRC_JS: 'web/dashboard/source/js',
EXPORT_JS: 'web/dashboard/static/js'
},
// Exported FILES
out = {
MINIFIEDCSS: 'app.min.css',
MINIFIEDJS: 'app.min.js'
};
/**
* $ gulp minifyJS --GLOBAL FUNCTION
* description: Concat and minified JS files into *.min.js
*/
gulp.task( 'minifyJS', function () {
return gulp.src( [ args.SRC_JS + '/**/module.js', args.SRC_JS + '/**/*.js' ] )
.pipe( sourcemaps.init() )
.pipe( concat( out.MINIFIEDJS ) )
.pipe( ngAnnotate() )
.pipe( uglify() )
.pipe( sourcemaps.write() )
.pipe( gulp.dest( args.EXPORT_JS ) );
} );
/**
* $ gulp linkJS --GLOBAL FUNCTION
* description: lin all js files to index.html client
*/
gulp.task( 'linkJS', function () {
return gulp.src( args.ROOT + args.FOLDER + 'index.html' )
.pipe( linker( {
scripts: [ ( args.EXPORT_JS + '/' + out.MINIFIEDJS ) ],
startTag: '<!-- APP -->',
endTag: '<!-- END APP -->',
fileTmpl: '<script src="%s"></script>',
appRoot: args.ROOT + args.FOLDER
} ) )
.pipe( gulp.dest( args.ROOT + args.FOLDER ) );
} );
/**
* $ gulp compileSASS --GLOBAL FUNCTION
* description: compile sass file into a CSS file
*/
gulp.task( 'compileSASS', function () {
return sass( args.SRC_SCSS + '/app.scss', {
sourcemap: true
} )
.on( 'error', function ( err ) {
console.error( 'Error!', err.message );
} )
.pipe( gulpif( args.production, sourcemaps.init() ) )
.pipe( gulpif( args.production, cssmin() ) )
.pipe( sourcemaps.write( {
includeContent: false,
sourceRoot: '/' + args.SRC_SCSS
} ) )
.pipe( gulpif( args.production, rename( {
suffix: '.min'
} ) ) )
.pipe( gulp.dest( args.EXPORT_CSS ) );
} );
/**
* $ gulp linkCSS --GLOBAL FUNCTION
* description: link to index.html client all sass files
*/
gulp.task( 'linkCSS', function () {
var isProduction = args.production;
return gulp.src( args.ROOT + args.FOLDER + '/index.html' )
.pipe( linker( {
scripts: isProduction ? [ ( args.EXPORT_CSS + '/' + out.MINIFIEDCSS ) ] : [ ( args.EXPORT_CSS + '/app.css' ) ], //jshint ignore: line
startTag: '<!-- MAIN STYLE -->',
endTag: '<!-- END MAIN STYLE -->',
fileTmpl: '<link href="%s" rel="stylesheet"/>',
appRoot: args.ROOT + args.FOLDER
} ) )
.pipe( gulp.dest( args.ROOT + '/' + args.FOLDER ) );
} );
/**
* $ gulp docs-api --GLOBAL FUNCTION
* description: genereate apidocs
*/
gulp.task( 'docs-api', shell.task( [ 'apidoc -i ./server/handlers -o docs/api/' ] ) );
/**
* $ gulp clean --GLOBAL FUNCTION
* description: clean client side css and js folder
*/
gulp.task( 'clean', function () {
var cleanALL = function () {
del.sync( [ './docs/**' ] );
del.sync( [ args.EXPORT_JS, args.EXPORT_CSS ] );
},
cleanONE = function ( folder ) {
del.sync( [ folder ] );
};
if ( !args.js && !args.css ) {
return cleanALL();
} else {
return args.js ? cleanONE( args.EXPORT_JS ) : cleanONE( args.EXPORT_CSS );
}
} );
/**
* $ gulp server
* description: launch the server. If there's a server already running, kill it.
*/
gulp.task( 'server', function () {
if ( node ) {
node.kill();
}
node = spawn( 'node', [ 'server/server.js' ], {
stdio: 'inherit'
} );
node.on( 'close', function ( code ) {
if ( code === 8 ) {
console.log( echo.redBright.bold( 'Error detected, waiting for changes...' ) );
}
} );
} );
/**
* $ gulp clientJS
* description: Compile all JS files for the Web Client component.
*/
gulp.task( 'clientJS', function ( callback ) {
args = {
js: 'js',
ROOT: client.ROOT,
SRC_JS: client.SRC_JS,
EXPORT_JS: client.EXPORT_JS,
FOLDER: 'public/'
};
runSequence(
'clean',
'minifyJS',
'linkJS',
callback
);
} );
/**
* $ gulp dashJS
* description: Compile all JS files for the Dashboard component.
*/
gulp.task( 'dashJS', function ( callback ) {
args = {
js: 'js',
ROOT: dashboard.ROOT,
SRC_JS: dashboard.SRC_JS,
EXPORT_JS: dashboard.EXPORT_JS,
FOLDER: 'static/'
};
runSequence(
'clean',
'minifyJS',
'linkJS',
callback
);
} );
/**
* $ gulp clientSCSS
* description: Compile all SCSS files for the Web Client component.
*/
gulp.task( 'clientSCSS', function ( callback ) {
args = {
css: 'css',
ROOT: client.ROOT,
SRC_SCSS: client.SRC_SCSS,
EXPORT_CSS: client.EXPORT_CSS,
FOLDER: 'public/'
};
runSequence(
'clean',
'compileSASS',
'linkCSS',
callback
);
} );
/**
* $ gulp dashSCSS
* description: Compile all SCSS files for the Dashboard component.
*/
gulp.task( 'dashSCSS', function ( callback ) {
args = {
css: 'css',
ROOT: dashboard.ROOT,
SRC_SCSS: dashboard.SRC_SCSS,
EXPORT_CSS: dashboard.EXPORT_CSS,
FOLDER: 'static/'
};
runSequence(
'clean',
'compileSASS',
'linkCSS',
callback
);
} );
/**
* $ gulp start
* description: Execute all sub-tasks and start the server,
* including the wathes (to listen for any changes)
*/
gulp.task( 'start', function () {
runSequence(
'clientJS',
'dashJS',
'clientSCSS',
'dashSCSS',
'server',
'watch'
);
} );
/**
* $ gulp watch
* description: watch for any changes and restart server if required
*/
gulp.task( 'watch', function () {
gulp.watch( [ 'server/index.js', './server/**/*.js', './server/**/*.json' ], function () {
runSequence(
'server'
);
} );
// Need to watch for sass changes too? Just add another watch call!
// no more messing around with grunt-concurrent or the like. Gulp is
// async by default.
gulp.watch( client.SRC_SCSS + '/**/*.scss', [ 'clientSCSS' ] );
gulp.watch( client.SRC_JS + '/**/*.js', [ 'clientJS' ] );
gulp.watch( dashboard.SRC_SCSS + '/**/*.scss', [ 'dashSCSS' ] );
gulp.watch( dashboard.SRC_JS + '/**/*.js', [ 'dashJS' ] );
} );
// Clean up if an error goes unhandled.
process.on( 'exit', function () {
if ( node ) {
node.kill();
}
} );
} )();

Answer 1

can you share your gulp code. Probably you might have written some gulp task which will dynamically create your index.html file. Whereever you have written task to add css files make your you have added correct path. May be which ever css files are missing are not in specified path.
gulp.task('inject:css', () => {
return gulp.src(paths.client.mainView)
.pipe(plugins.inject(
gulp.src(`${clientPath}/{app,components}/**/*.css`, {read: true})
.pipe(plugins.sort()),
{
starttag: '<!-- injector:css -->',
endtag: '<!-- endinjector -->',
transform: (filepath) => '<link rel="stylesheet" href="' + filepath.replace(`/${clientPath}/`, '').replace('/.tmp/', '') + '">'
}))
.pipe(gulp.dest(clientPath));
});
above task will include all css files from app,component
gulp.src(`${clientPath}/{app,components}/**/*.css`, {read: true})
If I add some css files outside those two folders. and add it to index manually. If i run gulp it will be removed
Hoping this will resolve your problem