Answer the question
In order to leave comments, you need to log in
Gulp - how not to compile standalone css files from imported less files?
Greetings,
some time ago, when it became necessary to choose an actual starter template for myself, I settled on
OptimizedHTML-4
In principle, the template is completely satisfied, at least for now.
But now there is a production need to use less instead of sass.
Actually, in the template itself, only rewrite a few files, it seems that I figured out everything.
Everything starts and runs without errors. But there is one little misunderstanding.
Files marked with the _ prefix - for example, _vars.less, _libs.less, _fonts.less - in addition to being successfully imported into the main compiled css, in addition to this, they are also compiled into separate independent files - _vars.css, _libs.css , _fonts.css etc..
Here I sit scratching my head, it seems that this paradigm with underscore is the same both in the case of sass and less, isn't it?
Or is there something different?
Just in case, here is the gulpfile.
var syntax = 'less', // Syntax: sass or scss or less;
gulpversion = '4'; // Gulp version: 3 or 4
var gulp = require('gulp'),
gutil = require('gulp-util' ),
less = require('gulp-less'),
browserSync = require('browser-sync'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
cleancss = require('gulp-clean-css'),
rename = require('gulp-rename'),
autoprefixer = require('gulp-autoprefixer'),
notify = require('gulp-notify'),
rsync = require('gulp-rsync');
gulp.task('browser-sync', function() {
browserSync({
server: {
baseDir: 'app'
},
notify: false,
// open: false,
// online: false, // Work Offline Without Internet Connection
// tunnel: true, tunnel: "projectname", // Demonstration page: http://projectname.localtunnel.me
})
});
gulp.task('styles', function() {
return gulp.src('app/'+syntax+'/**/*.'+syntax+'')
.pipe(less({ outputStyle: 'expanded' }).on("error", notify.onError()))
.pipe(rename({ suffix: '.min', prefix : '' }))
.pipe(autoprefixer(['last 15 versions']))
.pipe(cleancss( {level: { 1: { specialComments: 0 } } })) // Opt., comment out when debugging
.pipe(gulp.dest('app/css'))
.pipe(browserSync.stream())
});
gulp.task('scripts', function() {
return gulp.src([
'app/libs/jquery/dist/jquery.min.js',
'app/js/common.js', // Always at the end
])
.pipe(concat('scripts.min.js'))
// .pipe(uglify()) // Mifify js (opt.)
.pipe(gulp.dest('app/js'))
.pipe(browserSync.reload({ stream: true }))
});
gulp.task('code', function() {
return gulp.src('app/*.html')
.pipe(browserSync.reload({ stream: true }))
});
gulp.task('rsync', function() {
return gulp.src('app/**')
.pipe(rsync({
root: 'app/',
hostname: '[email protected]',
destination: 'yousite/public_html/',
// include: ['*.htaccess'], // Includes files to deploy
exclude: ['**/Thumbs.db', '**/*.DS_Store'], // Excludes files from deploy
recursive: true,
archive: true,
silent: false,
compress: true
}))
});
if (gulpversion == 3) {
gulp.task('watch', ['styles', 'scripts', 'browser-sync'], function() {
gulp.watch('app/'+syntax+'/**/*.'+syntax+'', ['styles']);
gulp.watch(['libs/**/*.js', 'app/js/common.js'], ['scripts']);
gulp.watch('app/*.html', ['code'])
});
gulp.task('default', ['watch']);
}
if (gulpversion == 4) {
gulp.task('watch', function() {
gulp.watch('app/'+syntax+'/**/*.'+syntax+'', gulp.parallel('styles'));
gulp.watch(['libs/**/*.js', 'app/js/common.js'], gulp.parallel('scripts'));
gulp.watch('app/*.html', gulp.parallel('code'))
});
gulp.task('default', gulp.parallel('styles', 'scripts', 'browser-sync', 'watch'));
}
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question