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
Related
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'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.
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');
});
I'm having trouble understanding Laravel 5's elixir pathing. In my project, I have multiple css files (bootstrap, plugins, theme etc) and javascript files stored under:
resources/assets/css/<my css files>
resources/assets/js/<my javascript files>
I simply want to combine and version all styles and scripts and place them in my public directory. I believe the default output directly is:
public/build/css/app-xxxxxxxx.css
public/build/js/app-xxxxxxxx.js
(Where xxxxxxxx is the checksum using the version method)
What should my gulpfile.js look like to achieve this? Thanks!
You can use full path on the name or set the third parameter as default path. Examples (works with scripts or css):
mix.stylesIn('resources/assets/css', 'public/css/all.css');
Since there is a bug where you can't use the output of a somethingAll to concatenate with something else, I use this instead (note the wildcard):
mix.scripts(['maskedinput.js',
'blockui.js',
'user/*.js'],
'public/js/user.js', 'resources/assets/js/');
First parameter is the input files, second is the output file, third is the input's default path.
To version just call it on the file path.
mix.version("public/js/user.js");