I used yeoman to scaffold an angular app like so:
yo angular --minsafe
Now, I'm trying to set up jade > html compilation using grunt-contrib-jade but I don't understand the huge Gruntfile.js generated for me.
There is a mountFolder function:
var mountFolder = function (connect, dir) {
return connect.static(require('path').resolve(dir));
};
...and a yeoman config object:
// configurable paths
var yeomanConfig = {
app: 'app',
dist: 'dist'
};
when running grunt server chrome opens up and I get served my page. But where is this magic 'dist' folder that's been served? I can't find it on disk...
The dist folder is only created when you run the build grunt task. While you run grunt server, you get the combined contents of app/ and the .tmp/ folder served to you, whereby .tmp contains temporary build artifacts like compiled SASS stylesheets, compiled CoffeeScript files and it would be the place you want to keep your compiled jade output.
Related
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.
My team currently works on multiple projects which all have their own gruntfile.js file. But they're all about the same, copied-pasted on every new project... Which is not good at all !
I'm searching for a way to maintain only one gruntfile.js and share an up-to-date version between all the projects. I see two ways of doing this : deploy the shared gruntfile.js to some path accessible through our internal network and ...
... use grunt --gruntfile = /path/to/share/gruntfile.js taskName on every call to a grunt task inside any project directory. A Jenkins build could keep the shared file up-to-date, re-deploying it on commit. In this way, a project wouldn't have its own gruntfile.js file anymore.
... inside the proper gruntfile.js of every project, find a way to tell grunt to import everything (tasks, configInit, etc.) declared in the shared gruntfile.js. Like it would be done with Maven pom.xml files having a parent pom.
Does anyone see a reason why one or both solutions wouldn't work ?
Does anyone know a simple way of doing this, maybe using an existing tool or plugin ?
Edit: We're on SVN, not GIT.
Finally, I found a way to share tasks declaration over multiple projects : I created a custom grunt plugin. This plugin contains :
custom-grunt-plugin
|_ config
|_ config.js : contains all the tasks configurations
|_ tasks
|_ custom-grunt.js : contains all the tasks declarations
|_ package.json : package info
|_ README.md : package documentation
I published my plugin and added it as a devDependency of all my projects.
Finally, the grunfile.js of all my projects :
module.exports = function (grunt) {
// Load custom tasks
grunt.loadNpmTasks('custom-grunt-plugin');
// Load grunt tasks automatically
require('load-grunt-tasks')( grunt );
// Load configuration from the custom grunt plugin
var config = require('custom-grunt-plugin/config/config');
// Add project specific variables to the config
config.pkg = grunt.file.readJSON('package.json');
config.paths = {
app: 'app',
dist: 'dist/<%= pkg.name %>/<%= pkg.version %>'
};
grunt.initConfig( config );
};
That's all ! Probably not the best solution. But this one works.
The next step would be to transfer the list of dependencies from the package.json of the projects to the package.json of the custom plugin, and install all dependencies recursively with 'npm install'. But it seems npm can't load and install the dependencies of the dependencies...
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 am running browserify for an app.js located at some path and it fails everytime with cannot find module lodash from [PATH].
Running "browserify:build" (browserify) task
Error: Cannot find module 'lodash' from '/var/lib/jenkins/buildcode/output/mydir/app_store_richUI/cartridge/js'
Warning: Error running grunt-browserify. Use --force to continue.
The [PATH] is same where the app.js file is present. But, if I change the file name to some other js file at same path, it works. So, the scene is that it succeeds for some js file and fails for others at same path.
Can someone suggest something ?
I have the Browserify.js script installed globally.
Browserify.js
module.exports = {
build: {
files: {
'<%= settings["local.build.dir"] %>/output/<%= grunt.config("build") %>/app_eyeconic_richUI/cartridge/static/default/js/eyeconic.app.js':'<%= settings["local.build.dir"] %>/output/<%= grunt.config("build") %>/app_eyeconic_richUI/cartridge/js/app.js'
},
}
}
The path is shown correctly in the logs with other files. It fails only with app.js file
It was a very trivial issue but took quite some time to resolve.
The issue was that the build suite was at a different location than the build source.
The browserify task contained require statements and it searches for modules in the parent directories so it was not able to find the required module.
After copying the build suite at the same path as the source, it worked.
So currently, my gruntfile.js(and other files/folders in the suite), exports and output directory at are same path.
I currently am using a Yeoman seed project which comes with a Gruntfile and I'm having some trouble understanding parts of it. One particularly confusing thing is that during the development phase my SASS files are compiled into CSS and placed into a .tmp directory. My project however looks for main.css under app/styles yet the only thing there is my scss file. How is my project able to find main.css when it's not where it's looking?
./myApp
--Gruntfile.js
--.tmp
----main.css
--./app
----styles
------main.scss
When I create the dist folder the main.css file is placed correctly where it should be.
I think it may have to do with the compass or live-reload plugin.
I believe that you are talking about the situation when you ran grunt serve.
In the situation, the built-in server provides files under both .tmp and app directories by default which is specified for grunt-contrib-connect in Gruntfile like followings.
// The actual grunt server settings
connect: {
...
livereload: {
options: {
open: true,
base: [
'.tmp',
'<%= config.app %>'
]
}
},
This is why "styles/main.css" in index.html file goes to .tmp/styles/main.css.