I'm trying to set up gulp to watch all my sass files, but I'm having trouble with my subdirectories.
This is my file structure in the scss folder:
default.scss
-base
-components
My gulpfile is set up like this:
const SCSS_SRC = './src/assets/scss/**/*.scss';
const SCSS_DEST = './src/assets/css';
gulp.task('sass', function () {
return gulp.src(SCSS_SRC)
.pipe(sass().on('error', sass.logError))
.pipe(minifyCSS())
.pipe(rename({ suffix: '.min' }))
.pipe(changed(SCSS_DEST))
.pipe(gulp.dest(SCSS_DEST))
});
gulp.task('default', function () {
gulp.watch(SCSS_SRC, ['sass']);
});
When I run gulp the first time, everything is compiled normally, but if i make changes in my sass files in the subdirectories they are not compiled.
If I make a change in the default style, the files in the subdirectories are compiled too though. But I don't want to have to update the default file everytime I update the other files.
This is the first time I use gulp, so I'm sorry if I'm missing something obvious.
I suggest simply removing the pipe(changed()) call as changed to usually used to filter the stream immediately after gulp.src. Unless you have a huge project I just don't see that it could be very useful right before gulp.dest. It is an easy thing to try to see if it helps.
Related
Gulp Function:
function style() {
//1.where is my scss
return gulp.src('src/scss/**/*.scss') //gets all files ending with .scss in src/scss
//2. pass that file through sass compiler
.pipe(sass().on('error',sass.logError))
//3. where do I save the compiled css file
.pipe(gulp.dest('src/css'))
//4. stream change to all browsers
.pipe(browserSync.stream());
}
Folder Structure:
Expected output:
syles.css will have styles written in syles.scss and vendor.scss
Actual Output:
syles.css will have styles written in syles.scss alone. vendor.scss styles are not added in styles.css
Your actual output is correct. You need to #use a partial into your styles.scss if you want only one file styles.css output containing the vendor.scss content.
Modules
You don't have to write all your Sass in a single file. You can split
it up however you want with the #use rule. This rule loads another
Sass file as a module, which means you can refer to its variables,
mixins, and functions in your Sass file with a namespace based on the
filename. Using a file will also include the CSS it generates in your
compiled output!
from https://sass-lang.com/guide
so in your styles.scss at the top:
#use 'vendor;
and then rename vendor.scss to _vendor.scss
I am new to Gulp programming.
I need to define a "dynamic" scss task that compiles multiple source directories in multiple destination directories
src/main/scss/
app.scss (global resource)
modules/ (modules resources)
admin/
*.scss
ftt/
*.scss
The above is the directory layout of the source files.
I am interested in compiling each set of scss files under modules directory (which I may not know in advance) into a directory tree that includes the module itself
src/main/scss/modules/admin/*.scss ==> webapp/secure/admin/common/common.css
src/main/scss/modules/ftt/*.scss==> webapp/secure/ftt/common/common.css
I can write a glob that captures src/main/scss/modules/*/*.scss but how to reuse the star representing the directory? If I was running regex I'd capture and use numbered group $1
For a longer working code version of looping through an array of folders to build folder-based bundles, see Processing arrays within Gulp to create bundles in each directory with ordered files
I would suggest looking at glob.sync. Do a search here for [gulp] glob.sync user:836330. That's me. I have answered a few questions here similar to yours. See particularly running a gulp task on separate folders. It runs the same gulp task on different folders and then uses the folder names to set unique destinations.
glob.sync is great for something like this.
Pseudo code follows (not tested):
const moduleFolders = glob.sync('src/main/scss/modules');
// perhaps your app.scss is supposed to be bundled into each module's css?
// if so, just add a second source to the gulp.src below
const sassSrc = 'common.scss'; // or your main scss file that does the imports in each module
gulp.task('default', () => {
let stream;
// work on each folder separately
moduleFolders.forEach(function (module) {
stream = gulp.src( module + sassSrc )
.pipe(sass())
//.pipe(concat('style.min.css'))
//.pipe(autoprefixer())
//.pipe(cssmin())
.pipe(gulp.dest( "webapp/secure/" + module + '/common' ));
});
return stream;
});
This is my gulpfile.js file;
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
return gulp.src('./sass/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css'));
});
gulp.task('sass:watch', function () {
gulp.watch('./sass/*.scss', ['sass']);
});
You can see my folders here:
I write some code in my main scss file and then run gulp sass command in the terminal. It looks like it works but nothing changes.
i dont think you need the './' in your src directory or destination directory, should look like this.
gulp.task('sass', function () {
return gulp.src('sass/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('css'));
});
For an explanation of partials, see partials and imports or sass language guide:
You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. This is a great way to modularize your CSS and help keep things easier to maintain. A partial is simply a Sass file named with a leading underscore. You might name it something like _partial.scss. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the #import directive.
And sass partial tutorial. In your case, remove the underscore before the main.scss filename and it will work as you expect. Into your main.scss you will import other partial files (with leading underscores).
I have some js files in my assets and I want to concat them to one app.js file.
This is what I have in my webpack.mix.js file:
mix.js([
'resources/assets/js/bootstrap.js',
'resources/assets/js/popper.js',
'resources/assets/js/jquery.js',
], 'public/js/app.js');
Now I want to use this script in my project :
$(document).ready(function () {
$('#someId').delay(2000).slideUp(300);
});
But its slide up does not work. When I load the 3 scripts in blade file separately, the function works very well but I need to place all scripts in a single file. Can anyone help me please?
Change it from mix.js to mix.scripts.
scripts is the concatenating function you're looking for when dealing with non-module libraries
I have 3 main JS files:
base.js
notLoggedIn.js
loggedIn.js
base.js contains all of the basic needs for my application and the other two files are self-explanatory.
What I need to do is this:
Combine base.js and notLoggedIn.js into file1.js.
Combine base.js, notLoggedIn.js, and loggedIn.js into file2.js.
And I need it in this order.
Here is what my gulpfile.js currently looks like:
elixir(function(mix) {
mix.sass('app.scss')
.browserify('base.js');
});
How do I modify the file to meet my needs?
Assuming that all three scripts you mention are located in the resources/assets/js directory, you can do the following:
elixir(function(mix) {
mix.scripts(['base.js', 'notLoggedIn.js'], 'public/js/file1.js')
.scripts(['base.js', 'notLoggedIn.js', 'loggedIn.js'], 'public/js/file2.js');
});