https://www.drupal.org/docs/theming-drupal/creating-automation-tools-for... →
First setup your custom theme in your project folder, once the theme setup was done, we need to install the gulp.
Make sure, you are having this module installed in this version, If the version got changed, it might cause issues while compiling.
gulp --v
CLI version: 2.3.0
Local version: 3.9.1
npm --v
11.1.0
sass --v
Ruby Sass 3.7.4
{
"name": "theme_name",
"version": "1.0.0",
"description": "",
"main": "gulpfile.js",
"dependencies": {
"gulp-load-plugins": "^1.6.0"
},
"devDependencies": {
"browser-sync": "^2.27.7",
"gulp": "^3.9.1",
"gulp-livereload": "^4.0.2",
"gulp-sass": "^3.2.1",
"gulp-sass-lint": "^1.4.0",
"gulp-scss-lint": "^1.0.0",
"gulp-uglify": "^3.0.2",
"gulp-useref": "^5.0.0",
"sass-lint": "^1.13.1"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}Save the file.
var gulp = require('gulp');
var sass = require('gulp-sass');
var sassLint = require('gulp-sass-lint');
var browserSync = require('browser-sync').create();
var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');
/*Error notifications*/
var reportError = function(error) {
notify({
title: 'Gulp Task Error',
message: 'Check the console.'
}).write(error);
console.log(error.toString());
this.emit('end');
}
/*sass to css conversion*/
gulp.task('sass', function() {
return gulp.src('./scss/**/style.scss') // Gets styles.scss
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError)) //compress css
.pipe(gulp.dest('./css'))
});
/*JS minification*/
gulp.task('uglify', function() {
gulp.src('./lib/*.js')
.pipe(uglify('main.js')) //minify js
.pipe(gulp.dest('./js'))
});
/*BrowserSync*/
gulp.task('browser-sync', function() {
//watch files
var files = [
'./scss/**/*.scss',
'images/**/*',
'templates/**/*.twig',
];
//initialize browsersync
browserSync.init(files, {
proxy: "http://localhost/your_project_folder/web/" // BrowserSync proxy, change to match your local environment
});
});
/* SASS check for coding standards */
gulp.task('lintsass', function () {
return gulp.src('./scss/**/*.scss')
// use gulp-cached to check only modified files.
.pipe(sassLint({
configFile: './.scss-lint.yml',
rules: {
'no-ids': 0,
'no-important': 0,
'no-css-comments': 0,
'class-name-format': 0,
'placeholder-in-extend': 0,
'nesting-depth': 0,
'no-mergeable-selectors': 0,
'no-transition-all': 0,
'no-vendor-prefixes': 0,
'no-url-domains': 0,
'no-url-protocols': 0,
'property-sort-order': 0,
'pseudo-element': 0,
'force-pseudo-nesting': 0,
'force-element-nesting': 0
}
}))
.pipe(sassLint.format());
});
/*sass watch*/
gulp.task('watch', ['browser-sync', 'uglify', 'lintsass', 'sass'], function (){
gulp.watch('./scss/**/*.scss', ['sass', 'lintsass']);
gulp.watch('./lib/*.js', ['uglify']);
gulp.watch( 'templates/**/*.twig', browserSync.reload);
})
Save the File
Once you are inside the theme folder enter the following command: gulp watch
Now your file will gets compiled
Active
Correction/Clarification
Not all content is available!
It's likely this issue predates Contrib.social: some issue and comment data are missing.
As far as I know that page can be edited by the community.
@Rengaraj Srinivasan, can you edit that page and make the changes?
Rengaraj Srinivasan cannot edit that page because he does not have the community role.