I am new with Laravel and I am thinking about one thing.
I have a node_modules folder with bootstrap 4. But I don't want to use the CDN in order to link my template into bootstrap. I want to link the folder that npm installed in my project to my template.
I have my gulpfile.js but I don't think that's what I need.
elixir((mix) => {
mix.copy('node_modules/bootstrap-sass/assets/fonts/', 'public/fonts');
mix.sass('app.scss')
.browserify('app.js');
});
I'm searching in lot of websites but I don't have a good solution. Do you have some Ideas in order to guide me ?
Thank you for taking time on my problem and have a Merry Christmas =)
Can you please indicate all of your css and js files in gulpfile.js elixir with this way:
var elixir = require('laravel-elixir'),
gulp = require('gulp'),
htmlmin = require('gulp-htmlmin');
require('laravel-elixir-uncss');
elixir.config.sourcemaps = false;
elixir.config.css.minifier.pluginOptions = {
keepSpecialComments: 0
};
elixir(function(mix) {
mix.styles(['node_modules/bootstrap-sass/assets/bootstrap.css', 'table.css', 'font-awesome.css', 'main.css'], 'public/css/app.css');
});
elixir(function(mix) {
mix.scripts(['jquery.js', 'main.js', 'table.js', 'init.js'], 'public/js/app.js')
});
elixir(function(mix) {
mix.compress();
});
So finally all css files will make one file name app.css and all js files will make one final file name app.js
Works fine for me, hope this one will work for you too !
Thank You
Related
I am new in laravel. I installed npm before some days. And now I need editor in my application. So I have installed it via npm using "npm install summernote --save-dev" command. And add below lines in my app.js
require('./bootstrap');
require('summernote');
require('summernote/dist/summernote.css');
require('summernote/dist/summernote.js');
require('jquery');
$(document).ready(function() {
$('#content_editor').summernote();
});
and then compiled the assets via "npm run dev" command. But it will display 2 textarea, one that is in my html and second is summernote textarea. It is not displaying toolbars and other things. It is displaying only textarea.
Can anybody please help me to resolved this problem. I am newly learning laravel. So, I don't have deep knowledge of packages. I just want to display it without including css and js to header. I need it via webpack.
This code in app.js with Laravel 8 does work:
require('./bootstrap');
require('summernote');
require('summernote/dist/summernote.css');
require('summernote/dist/summernote.js');
import $ from 'jquery';
window.$ = window.jQuery = $;
$(document).ready(function () {
$('.summernote').summernote();
});
The trick is in webpack.mix.js configuration file. It should appear something like:
const mix = require('laravel-mix');
let path = require('path');
mix.webpackConfig({
resolve: {
alias: { jQuery: path.resolve(__dirname, 'node_modules/jquery/dist/jquery.js') }
}
});
// Into app.js, you require 'summernote' as always
mix.js('resources/js/app.js', 'public/js');
Source: https://laracasts.com/discuss/channels/javascript/summernote-and-webpack
Following code, tried with both ./ as src and dest. Gave security administration full rights to folders, just in case if there was any issue.
So whenever I change styles.css from the styles folder, the code runs good on gulp watch and detects change too. It does run styles command on file change too. But then no folders are created in my dest folder.
var gulp = require('gulp');
gulp.task('styles' , function() {
return gulp.src('/app/assets/styles/styles.css')
.pipe(gulp.dest('/app/styles.css'));
});
gulp.task('watch',function(){
gulp.watch('./app/assets/styles/styles.css',
function() {
gulp.start('styles');
});
});
gulp.dest() takes a folder only, not a file. It probably is creating a folder, it is just called styles.css! Look under that for your file styles.css.
You probably want gulp.dest('./app'). the file name will be retained automatically.
I would also simplify to the below. gulp.start is not really documented.
gulp.task('watch',function(){
gulp.watch('./app/assets/styles/styles.css', ['styles']);
});
gulp.task('styles' , function() {
// added the . before /app here and in dest
return gulp.src('./app/assets/styles/styles.css')
.pipe(gulp.dest('./app'));
});
I'm trying to use gulp-elm with a monolithic architecture. I have setup my project dir with client and server directories and I've put my gulp file in the main directory. The directory structure is pretty simple.
project/
gulpfile.js
package.json
client/
elm-package.json
server/
...
When i run, for example,
gulp elm-init
with the following task:
// File paths
var paths = {
dest: 'client/dist',
elm: 'client/src/*.elm',
static: 'client/src/*.{html,css}'
};
// Init Elm
gulp.task('elm-init', function(){
return elm.init({ cwd : 'client' });
});
// Compile Elm to HTML
/*gulp.task('elm', ['elm-init'], function(){
return gulp.src(paths.elm)
.pipe(plumber())
.pipe(elm({ cwd : 'client' }))
.pipe(gulp.dest(paths.dest));
});*/
the elm-stuff folder and elm-package.json get moved to the main project directory. Is this expected? if not, is there a correct way to use a gulpfile from the parent directory to build an elm package in a nested directory? I think my effort matches the example.
gulp.task('init-nested', function(){
return elm.init({cwd: 'elm/nested-elm/'});
});
gulp.task('nested', ['init-nested'], function(){
return gulp.src('elm/nested-elm/*.elm')
.pipe(elm.make({filetype: 'html', cwd: 'elm/nested-elm/'}))
.pipe(gulp.dest('dest/'));
});
I've tried looking at the source, as well as following dependencies to see if i could figure it out myself, but i'm relatively unfamiliar with node so it's hard for me to figure out exactly what's going on in the gulp-elm source (as well as one of the deps i checked out.)
I was using this tutorial by Auth0 which had an old version of gulp-elm in package.json. Ugh!
I'm trying to deploy a basic nodejs app to OpenShift. I'm not sure how to do it with webpack though. Do I build the bundle.js file locally and just deploy that along with the index.html? I tried that by putting the bundle.js file in a /public directory and pointing to that using a relative path in the index.html, but I get bundle.js not found error. (It works when I run it locally.) What step am I missing? Must I not use relative paths in OpenShift? I find the documentation for OpenShift rather complicated. If anybody out there can break this down I'd much appreciate it!
I did miss a step: You need to add the directory in the server.js like so:
self.initializeServer = function() {
self.createRoutes();
self.app = express.createServer();
self.app.configure(function() {
self.app.use('/public', express.static(__dirname+'/public'));
});
// Add handlers for the app (from the routes).
for (var r in self.routes) {
self.app.get(r, self.routes[r]);
}
};
I installed grunt-bower module and followed up the below link:
https://stackoverflow.com/a/22456574/194345
but still not able to access js or css files placed in assets folder.
I installed jquery with bower which is in "assets\lib\jquery\dist\jquery.js" but in browser, tried following URL to access it:
http://localhost:1337/js/jquery.js
http://localhost:1337/lib/js/jquery.js
http://localhost:1337/lib/jquery/dist/jquery.js
it always displays not found.
What is the correct path?
I think you may not have fully implemented the solution from the link you posted, specifically the part about configuring the grunt-bower task. I've edited that otherwise excellent answer to be a but more clear--you need to wrap the configuration in a function and save it as tasks/config/bower.js:
module.exports = function(grunt) {
grunt.config.set('bower', {
dev: {
dest: '.tmp/public',
js_dest: '.tmp/public/js',
css_dest: '.tmp/public/styles'
}
});
grunt.loadNpmTasks('grunt-bower');
};
Then, next time you lift Sails, jquery.js will be copied to .tmp/public/js and therefore be available at http://localhost:1337/js/jquery.js.