Im using yeoman for a project.
Basically it's working fine, but during the build process I want to move my images folder to somewhere else.
So I loaded the grunt-contrib-copy task which would let me do that. But unfortunately this conflicts with the yeoman built-in copy task.
Is there any way to alias the grunt-contrib-copy in my Gruntfile.js so I can use both of them?
grunt.loadNpmTasks('grunt-contrib-copy');
//Here I need to use "copy" again but not referencing the yeoman task but the grunt-contrib-copy task.
grunt.registerTask('build','intro clean coffee compass mkdirs concat css min replace copy time');
grunt.renameTask() will probably help you here. Try this:
// temporarily rename yeoman's copy task
grunt.renameTask('copy', 'yeomanCopy');
// load 'copy' from grunt-contrib-copy
grunt.loadNpmTasks('grunt-contrib-copy');
// rename it to something other than 'copy'
grunt.renameTask('copy', 'myCopy');
// rename yeoman's task back to its original name so nothing breaks
grunt.renameTask('yeomanCopy', 'copy');
// now use 'myCopy' for your purposes
// ...
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.
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 Grunt Imagemin to optimize a folder of images. However everytime I run that command, it runs imagemin on ALL of the images. Is there a way to only run grunt imagemin when it detects new changes?
Try implementing grunt-newer:
Grunt Task for running tasks if source files are newer only.
Here you can find a short tutorial about how to use it.
After implementing it, you should prepend newer: to the imagemin task.
First of all i have not really understood what gruntjs really does, but i have some idea. I am hoping that by seeing how and for what it is used i will come to see its purpose. So could anyone explain to me what is gruntjs, why it's used, and for what it's used.
Is it beneficial for indie developer or for team or both?
Is it only for big projects?
Is it just a trend/fad? And makes things uncomplicated for no reason?
So basically in short What are benefits of it and for whom?
Grunt is a task runner. That's all it does. If you're a Java guy, think Ant.
Developers use Grunt to automate the running of tasks, especially sequences of tasks. Some of those tasks are so prevalent, such as linting JavaScript, running unit tests, or minifying JavaScript, that they're packaged up as plugins and freely available for you to use. For example, grunt-contrib-clean is a plugin that contains a clean task. This task simply deletes the contents of a list of directories, a common step in a build process. To use it, you first pull the plugin into you Gruntfile.js using
grunt.loadNpmTasks('grunt-contrib-clean');
and then configure the clean task to clear your hypothetical minified directory using
grunt.initConfig({
clean: [ 'minified' ]
});
You can now run the clean task from the command line using
grunt clean
To visualise its potential, imagine a task that cleans a directory, then runs Jasmine unit tests using Karma, then lints and compiles LESS files, minifies and concatenates JS files, and packages them up for deployment, or outright deploys them.
So to answer your questions
it can be beneficial to anyone working on the project
the benefit is proportional to how many repetitive tasks you have to deal with
it's a tool, not a trend/fad, and it simplifies processes, not overcomplicates them
want to do pre required task before running project then grunt is best.
Means task required for running project
In grunt we can use add task .Common task like
browserify : In our project we crate multiple file by name convention for better understanding. But when we want to run the project you have to include all files rather than you can just combine all file in one file at the time for deploy project it will reduces your server time to include all files
just like include in Gruntfile.js
uglify:{
app: {
src: ['app/**/*.js'],//include all js file in app folder
dest: 'public/site.js'//one file
}
}
grunt.loadNpmTasks('grunt-browserify');//use npm task for browserify
Register Task : In project we use diff environment.If you want manage what thing to be run before the deploy by each environment.
Just like task required for only Env Dev watch task
grunt.loadNpmTasks('grunt-contrib-watch');
For this you register task dev
env: {
development: { NODE_ENV: 'development' },
staging: { NODE_ENV: 'staging' },
production: { NODE_ENV: 'production' }
}
grunt.registerTask('dev',['env:development','watch']);//list of task required only for dev env
grunt.registerTask('production',['env:production']);
I have a Grunt task to concat 3x JS files into a single plugins.js file. I now no longer require one of the files (let's call it unrequired.js), so I've removed it from the list of source files in Gruntfile.js. However, whenever I run grunt concat, the output file still contains unrequired.js. The only way around it is to trash unrequired.js and then run the task again. Is there some kind of caching feature at play here? Does the concat task ignore changes being made to Gruntfile? What am I missing?