I'm working on my first angularjs project and went with this framework generator (https://www.npmjs.com/package/generator-leptir-angular-bootstrap) to use bootstrap with scss/less.
The leptir uses gulp to compile (this works fine) but the bower_component bootstrap uses grunt to compile. My issue is that when I want to modify bootstrap less files, I need to compile the bootstrap.min.css with grunt, then rerun gulp watch in the parent directory to compile that min.css with the bower and custom scss, plus trigger the browser refresh, etc.
What I want to know is, is there a way I can directly run or artificially trigger a gulp task (in this case gulp watch) inside a gulpfile from a separate gruntfile?
I tried using grunt.touch after my scss is compiled, but that doesn't seem to trigger gulp watch. Any other thoughts?
my-project
|- public
|- bower_components
|- bootstrap
|- less (directory of all my bootstrap less files)
|- Gruntfile.js
|- package.json
|- app.scss (when changed, triggers gulp.watch)
|- gulpfile.js
|- package.json
So you are using Gulp and Grunt along with Less and Scss in one project? That sounds complicated without the need to be complicated. Any specific reason you are going for that setup or generator got you in that position?
I would suggest moving everything to gulp config and going with either less or either scss and avoid mixing those 2. While that technically can work i don't see a reason to do that, and it can raise complexity of your source code.
Let me know more details in the reply.
Related
I have a project that uses gulp and I need to use splide js to create a slider, i used NPM to install splidejs and now I need to include splidejs CSS file to my main.scss however whatevere I do to get to node_modules file from my main.scss is not working. In webpack we use ~to get to node_modules but how can i do it in gulp to get there?
I have tried with ~ and with node_modules path and directory in project but nothing works
In Gulp, you can use the gulp.src() function to specify a file path that includes the node_modules directory. This function allows you to specify the source files that you want to include in your Gulp task.
For example, if you want to include all the JavaScript files in the node_modules directory in a Gulp task, you could use the following code:
gulp.src('node_modules/**/*.js')
.pipe(someGulpPlugin())
.pipe(gulp.dest('dist'));
This will include all the JavaScript files in the node_modules directory and its subdirectories in the Gulp task. The ** wildcard indicates that all subdirectories should be included, and the *.js pattern indicates that only JavaScript files should be included.
You can also use other file globs or patterns to specify the specific files that you want to include in your Gulp task. For more information on using file globs with Gulp, you can refer to the Gulp documentation.
I'm currently discovering modules with npm, and I went to use bootstrap-sass. Now that the modules were downloaded, I was looking for a solution to compile scss into the static folder of the application, and also the js bootstrap files.
But according to npmjs documentation of the modules, I can't found a simple solution which is not to move the js files myself and compile the scss bootstrap files from node_modules with something like node-sass.
What is the simplest way to use this module correctly and with the possibility to custom ?
Edit :
For now, I am using the following scripts/files :
"compile-js": "browserify assets/static/js/main.js | uglifyjs > assets/static/js/bundle.js",
"compile-sass": "node-sass assets/scss/app.scss assets/static/css/app.css --output-style compressed"
app.scss
#import "../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap-sprockets.scss";
#import "../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss";
main.js
global.jQuery = require("jquery")
const bootstrap = require('bootstrap-sass');
I've never used bootstrap-sass before, but the documentation implies that a build tool to preprocess the SCSS is a prerequisite for using this module. While it's no longer the shiniest tool in the shed, Gulp is very capable of handling this task as well as moving the files from node_modules to your project root directory for you.
Here's a breakdown of one approach to implement this:
Create three subfolders in your project root directory and call them sass, css and javascript.
Create a file in the sass folder and call it app.scss. Open it and paste this: #import './node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss';. When the file is converted into CSS, all of the Bootstrap modules will be there. Beneath the #import statement on line 1, feel free to write whatever style rules you want.
Assuming you have already run npm init and have a package.json file in your project directory, run npm install gulp -D in your terminal. This installs gulp (my task runner of choice!).
Run npm install gulp-sass --save-dev. This installs the gulp plugin that will preprocess the Bootstrap SASS into CSS.
Create a file in your root directory (not in any of the subfolders) called gulpfile.js
Copy and paste this text into gulpfile.js:
(note: for this to work, your SASS and CSS folders must be called sass and css, respectively, unless you change their names in the following code.)
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass-to-css', function () {
return gulp.src('./sass/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css'));
});
gulp.task('javascript', function () {
return gulp.src('./node_modules/bootstrap-sass/assets/javascripts/bootstrap.min.js')
.pipe(gulp.dest('./javascript'));
});
gulp.task('default', ['sass-to-css', 'javascript']);
Lastly, run the command gulp in your terminal to execute the gulpfile, which will do two things:
Preprocess and move all of the SASS into your css folder.
Copy bootstrap.min.js from node_modules into your project's javascript folder.
Of course, don't forget to link to these assets in your HTML.
I whipped up this gulpfile on the fly and it works on my machine, but if you decide to try this approach then feel free to ask if something throws an error. Best of luck on your project.
I'm kind of confused. This is my project structure
installing bootstrap using bower and some file and directory what direction should I follow to using sass in this kind of structure: for example I mean
install grunt
grunt to your project
add sass file what ever your want
...
I see a lot of ways and you know many of them do not match with my project structure. some one said grunt some one else said bootstrap sass and compile your project and more.
this article by css tricks is the MAP
Gulp for Beginners
1-install gulp globally
2-install gulp in your project
note-gulp is very very flexible with paths and project structures
3-you need two folder app-dist
4-add file gulpfilel.js
5-install sass plugin in gulp
6-write a task and run it !
7-just simple ?!!
Is there any util with we can build project using gulp on vendor/src files same as symfony assetic system?
I mean bundle inheritance.
My gulp is set on vendor files and compile resources to web catalog, but i didn't found possibility that gulp recognize if files were override by my bundle in src/ catalog
I think you should use the plugin Gulp Watch (https://www.npmjs.com/package/gulp-watch/) and make a watch task that will check if a file changed.
If a file change you gulp watch task will launch another task to compile your files or just copy them.
Your watch should look like this
gulp.task('watch', function () {
gulp.watch(app + '/scss/**/*.scss', ['sass']); // If a scss file change it will run my sass task
gulp.watch(app + '/img/**/*.{jpg,jpeg,png,gif,svg}', ['images']); // If there is a new image it will run my images task
});
You can do it with other file html js etc
I hope this will help you.
I'm using the Yeoman stack to bootstrap an application and had a question on how CSS files should be handled. (I've uploaded a sample on Github : https://github.com/ddewaele/jQueryDataTablesGrunt)
The basic question is : How do you go about handling different CSS files
during development (when running grunt serve)
when packaging the app (when running grunt build).
I have installed a number of libraries through bower that come with CSS files.
For example the jQueryDataTables library has the following CSS
bower_components/datatables/media/css/jquery.dataTables.css
Now, the way I understand it is that I should never reference this jquery.dataTables.css file directly in my index.html (I hope this assumption is correct).
My index.html should only contain
<link rel="stylesheet" href="styles/main.css">
I assume that this styles/main.css will be generated by the grunt workflow and will be correct both in dev mode, as well as in dist mode.
I'm puzzled by a couple of things
How should I tell grunt that I need to include for example bower_components/datatables/media/css/jquery.dataTables.css
Do I do need to reference that jquery.dataTables.css in my index.html, or in my Gruntfile.js, or simply drop it in app.styles ?
How does grunt decide what CSS files it needs to assemble into a single main.css
How does grunts behavior differ between grunt serve and grunt serve dist
Here's what I found :
grunt serve
When calling grunt serve , a CSS file is generated called .tmp/styles/main.css,
That is in fact the CSS file that is used by the app when it launched by 'grunt serve'.
That main.css file only contains stuff coming from the app/styles/main.scss file.
Other CSS files that are put in app/styles/ are not being picked up by grunt serve.
grunt serve:dist
When calling grunt serve:dist, a CSS file is generated called dist/styles/2314bw1.main.css
That is in fact the CSS file that is used by the app when it launched by grunt serve:dist.
That main.css file contains everything that it found in app/styles/*.css,
So the basic issue is that when running grunt serve , the generated main.css does not all the classes from all the css files found in app/styles/*.css.
However, when packaging the app grunt build or grunt serve:dist, it does contain all classes from all the css files found in app/styles/*.css.
How do I configure my app / grunt to use these external CSS, and how do I get to a situation that works during development, as well as during packaging.
I'm not familiar with Yeoman but it look likes it's running gruntjs underneath. You can edit the tasks to include plugin specific styles.
This is your gruntfile.js
How does grunt decide what CSS files it needs to assemble into a single main.css ?
Drop your plugin specfic styles inside "app/styles". You can give it a special folder if you want to. Then add to your main.scss. Sass will compile everything down in the main.css.
First in console:
cp jquery.dataTables.css jquery.dataTables.scss
Then add the import into main.scss
#import "jquery.dataTables"
How does grunts behavior differ between grunt serve and grunt serve dist?
serve:dist does this(see code below), it builds your files, opens a link to your server, creates a dummy webserver to serve your files using connect
if (target === 'dist') {
return grunt.task.run(['build', 'open:server', 'connect:dist:keepalive']);
}
serve on the other hand watches changes to your files.