I have this project in Symfony
src
ProjectName
AdminBundle
Resources
public
css
style1.css
style2.ccs
sass
style1.scss
style2.scss
AdvertiserBundler
..
CommonBundle
..
PublicBundle
..
WebmaserBundle
..
All bundles have the same structure. All *.scss files are in Resources/sass/ and compiled *.css files are in Resources/public/css/. How I can put all files from A to B with one function? I try work with base, but nothing happens.
This is gulpfile.js
var gulp = require('gulp'),
sass = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css')
;
gulp.task('styles', function() {
gulp.src('src/ProjectName/*Bundle/Resources/sass/*.scss', {
base: 'sass'
})
.pipe(sass({
outputStyle: 'compressed',
errLogToConsole: true
}))
.pipe(autoprefixer('last 5 version', 'ie 9'))
.pipe(minifycss())
.pipe(gulp.dest('public/css/'))
;
});
gulp.task('default', ['styles'], function() {
gulp.watch('src/ProjectName/*Bundle/Resources/sass/*.scss', ['styles']);
});
I don't want write like this five times:
....
gulp.src('src/ProjectName/AdminBundle/Resources/sass/*.scss')
.pipe(gulp.dest('src/ProjectName/AdminBundle/Resources/public/css'))
....
You can define multiple paths as follows: gulp.src(['path1', 'path2']).
Source: Glob stream
Related
I'm trying to set up a modular workflow where, when running gulp, it will compile SASS files in a folder to CSS. Those new CSS files will be stored in the same folder.
For example, here's my current folder structure:
theme
- modules
- hero
- hero.html
- hero.scss
Here is my 'gulpfile.js':
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task( 'sass', function() {
return gulp.src('modules/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('modules/**/*.css'))
});
However, when running gulp sass, this is what my folder structure looks like:
theme
- **
- *.css
- hero
- hero.css
- modules
- hero
- hero.html
- hero.scss
Whereas what I'm after is:
theme
- modules
- hero
- hero.html
- hero.scss
- hero.css (hero.css to appear here after running gulp)
Am I far off?
If I understand correctly you want to return .css file where .scss file exist. Here is the gulpfile.js code.
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('autoprefixer');
var postcss = require('gulp-postcss');
var paths = {
styles: {
src: 'modules/**/*.scss',
dest: 'modules'
}
}
function scss() {
return gulp.src(paths.styles.src)
.pipe(sass().on('error', sass.logError))
.pipe(sass({ outputStyle: 'compressed' }))
.pipe(postcss([autoprefixer()]))
.pipe(gulp.dest(paths.styles.dest));
}
exports.scss = scss
function watch() {
scss()
gulp.watch(paths.styles.src, scss);
}
exports.watch = watch
package.json file need devDependencies and browserlist. it will be like this.
"devDependencies": {
"autoprefixer": "^9.7.4",
"gulp": "^4.0.2",
"gulp-postcss": "^8.0.0",
"gulp-sass": "^4.0.2"
},
"browserslist": [
"last 71 version"
],
use $ gulp watch running your task.
Your folder structure like this
Themes
modules
hero
hero.html
hero.scss
header
header.html
header.scss
footer
footer.html
footer.scss
package.json
gulpfile.js
It will return
Themes
modules
hero
hero.html
hero.css
hero.scss
header
header.html
header.css
header.scss
footer
footer.html
footer.css
footer.scss
package.json
gulpfile.js
Hope this help!
gulp.dest() only wants a path, it will then append the current file path to it. And sass() will already have changed the extension to css so that shouldn't be a problem either. So in your case it should work like this.
gulp.task('sass', function() {
return gulp.src('modules/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('modules/'));
});
gulp.src tells the Gulp task what files to use for the task,
while gulp.dest tells Gulp where to output the files once the task is completed.
So in your case it should work like this
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task( 'sass', function() {
return gulp.src('modules/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('modules/**'))
});
I am confused on where to edit WordPress themes. I am new to WordPress and have a custom theme which main style.css file just imports the style for this theme like this:
#import url('assets/stylesheets/app.css');
I read that it is recommended to make a new child theme, but I don't see the need for that in my case, since I would like to almost completely change the css of the theme, so there is no need to keep the original theme files. Since, I tried to modify the file 'assets/stylesheets/app.css' I couldn't see any changes in the browser. Can I edit the styles there, or I need to do it in the WP admin dashboard somewhere?
I would like to build my scripts with gulp, which I set up like this:
var gulp = require('gulp');
var sass = require('gulp-sass');
var include = require('gulp-include');
var watch = require('gulp-watch');
var batch = require('gulp-batch');
var sourcemaps = require('gulp-sourcemaps');
var prefix = require('gulp-autoprefixer');
var connect = require('gulp-connect');
var browserify = require('gulp-browserify');
var livereload = require('gulp-livereload');
var browsersync = require('browser-sync');
var config = {
srcDir: './assets',
styles: {
src: '/scss/app.scss',
dest: '/stylesheets',
includePaths: [
'node_modules/foundation-sites/scss'
],
prefix: ["last 2 versions", "> 1%", "ie 9"]
},
scripts: {
src: '/js/app.js',
dest: '/js'
},
img: {
src: '/images/**/*',
dest: '/images'
}
};
var srcDir = './src',
destDir = './build';
gulp.task('styles', function() {
return gulp.src(config.srcDir + config.styles.src)
.pipe(sourcemaps.init())
.pipe(sass({
includePaths: config.styles.includePaths,
sourceMap: true,
outFile: config.srcDir + config.styles.dest + '/app.css',
outputStyle: 'compressed'
}))
.pipe(prefix(config.styles.prefix))
.pipe(sourcemaps.write())
.on('error', sass.logError)
.pipe(gulp.dest(config.srcDir + config.styles.dest))
.pipe(browsersync.reload({ stream: true }));
});
gulp.task('scripts', function() {
gulp.src(config.srcDir + config.scripts.src)
.pipe(browserify({
insertGlobals : true,
debug : !gulp.env.production
}))
.pipe(gulp.dest(config.srcDir + config.scripts.dest))
});
gulp.task('include', function() {
return gulp.src(config.srcDir + config.img.src)
.pipe(gulp.dest(config.srcDir + config.img.dest));
});
gulp.task('watch', function () {
// Watch .scss files
gulp.watch(config.srcDir + config.styles.src, ['styles']);
// Watch .js files
gulp.watch(config.srcDir + config.scripts.src, ['scripts']);
});
gulp.task('default', ['styles', 'scripts', 'watch']);
So, not sure how can I do it utilizing gulp. Where can I change the theme without creating the child theme?
Where does the import of "app.css" happen - at the beginning or at the end of the "style.css" file? If it's at the beginning, the changed rules in "app.css" might be overwritten by the following "style.css" rules.
I try to convert my less files into css files using gulp-less and then use gulp-recess to change properties order in css files. Task less works properly but task recess doesn't work.
This is my gulpfile.js file
'use strict';
var gulp = require('gulp'),
less = require('gulp-less'),
path = require('path'),
recess = require('gulp-recess');
// less
gulp.task('less', function () {
return gulp.src(['less/style.less', 'less/fonts.less'])
.pipe(less({
paths: [ path.join(__dirname, 'less', 'includes') ]
}))
.pipe(gulp.dest('css'));
});
// recess
gulp.task('recess', ['less'], function () {
return gulp.src(['css/style.css', 'css/fonts.css'])
.pipe(recess())
.pipe(recess.reporter())
.pipe(gulp.dest('css'));
});
// watch
gulp.task('watch', function () {
gulp.watch('less/*.less', ['less']),
gulp.watch('css/*.css', ['recess']);
});
// default
gulp.task('default', ['less', 'recess', 'watch']);
Errors in Node.js console
What's wrong? How to fix it?
gulp-recess won't reorder your css properties, its purpose is to 'lint' your css/less files - checks for syntax errors so you can fix there warnings/errors yourself in the source files.
Trying to create a gulp file that picks up our LESS files and generates the appropriate .css, .min.css, and .css.map files. Close, but sourcemaps is writing the map to a file with the extension .css.min.css.
/// <vs BeforeBuild='less' SolutionOpened='less' />
/// <binding BeforeBuild='less' ProjectOpened='less' />
var gulp = require('gulp');
var less = require('gulp-less');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('autoprefixer');
var minifycss = require('gulp-minify-css');
var pleeease = require('gulp-pleeease');
var rename = require('gulp-rename');
var mqpacker = require('css-mqpacker');
var csswring = require('csswring');
var postcss = require('gulp-postcss');
var processors = [
autoprefixer({ browsers: ["IE >= 9, firefox > 10, last 2 Chrome versions, last 2 safari versions, last 2 ios versions"] }),
mqpacker
];
gulp.task('less', function () {
gulp.src('./itims/Content/*.less', { base: './itims/content'})
.pipe(sourcemaps.init())
.pipe(less())
.pipe(postcss(processors))
.pipe(rename({
extname: '.css'
}))
.pipe(gulp.dest('./itims/content'))
.pipe(minifycss())
.pipe(sourcemaps.write('./'))
.pipe(rename({
suffix: '.min',
extname: '.css'
}))
.pipe(gulp.dest('./itims/content'));
});
As you might guess, your problem comes from the rename that is after the sourcemaps.write. You want to rename only *.css files, hence the following solution should do the trick :
Add gulp-if to your dependencies if not already present
var if = require('gulp-if');
Rewrite your task as follows :
gulp.src('./itims/content/*.less', {base: './itims/content'})
.pipe(sourcemaps.init())
.pipe(less())
.pipe(postcss(processors))
.pipe(gulp.dest('./itims/content'))
.pipe(minifycss())
.pipe(sourcemaps.write('./'))
.pipe(if('*.css', rename({extname: '.min.css'}))
.pipe(gulp.dest('./itims/content'));
Notes:
I removed your first rename as the less plugin already handles the renaming of *.less to *.css
Beware of the case in the path names. You mixed './itims/Content' and './itims/content'.
How can I tell Gulp to skip or ignore some files in gulp.src([...])? For instance, I don't want to compress and concat this file in my css/ folder - 'css/ignnore.css'?
var autoprefix = require('gulp-autoprefixer'),
concat = require('gulp-concat'),
minifyCss = require('gulp-minify-css');
gulp.task('styles', function() {
gulp.src([
'css/ignnore.css', // ignore this file
'css/*.css'
])
.pipe(concat('styles.css'))
.pipe(autoprefix('last 2 versions'))
.pipe(minifyCss())
.pipe(gulp.dest('local/view/style/base/css/dist/'));
});
Add a !:
gulp.task('styles', function() {
gulp.src([
'!css/ignnore.css', // <== !
'css/*.css'
])
.pipe(concat('styles.css'))
.pipe(autoprefix('last 2 versions'))
.pipe(minifyCss())
.pipe(gulp.dest('local/view/style/base/css/dist/'));
});
Try this:
gulp.src(['css/**/!(ignore.css)*.css'])