Related
I am using NPM in a WP project.
I already have a grunt task that compiles my separate SCSS files into CSS files and then minifies them into one default.min.css file when running grunt (that's good.)
My main issue is that I would like to include different npm packages such as fontawesome, bootstrap etc. where they also would be minified into that one minified min.css file, together with my own files.
I would also like to know how to do this for my own *.js files uglify'd with different packages i'm using (jquery-ui, owl-carousel, etc.)
Please find below my Gruntfile.js, this is my first Gruntfile.js so feel free to include any constructive remarks.
Thanks,
Bud
Gruntfile.js
module.exports = function (grunt) {
grunt.initConfig({
sass: {
dist: {
files: [{
expand: true,
cwd: 'resource/scss/',
src: ['*.scss'],
dest: 'resource/builds/css/',
ext: '.css'
}]
}
},
watch: {
css: {
files: '**/*.scss',
tasks: ['sass', 'cssmin']
},
scripts: {
files: 'resource/js/*.js',
tasks: ['uglify']
}
},
cssmin: {
target: {
files: [{
expand: true,
cwd: 'resource/builds/css/',
src: ['*.css', '!*.min.css'],
dest: 'public/css',
ext: '.min.css'
}]
}
},
concat: {
js: {
options: {
separator: ';'
},
src: 'resource/**/*.js',
dest: '<%= paths.dest.js %>'
}
},
uglify: {
build: {
files: [{
expand: true,
cwd: 'resource/js/',
src: '**/*.js',
dest: 'public/js',
ext: '.min.js'
}]
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-concat');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default',['cssmin', 'uglify', 'watch']);
};
Looks like it's not re-copying my files when I click save anywhere on my development files (so I want to re-copy onto the Production folder immediately). Here is the part from my Gruntfile.js.
Location of this file: /development/Gruntfile.js
Where I want to copy some files: /production
[...]
copy: {
watch: {
options: {
livereload: true
},
files: [
{expand: true, src: ['css/*'], dest: '../production/', filter: 'isFile'},
{expand: true, src: ['js/*'], dest: '../production/', filter: 'isFile'},
{expand: true, src: ['js/vendor/*'], dest: '../production/', filter: 'isFile'},
{expand: true, src: ['images/**'], dest: '../production/'},
{expand: true, src: ['public/**'], dest: '../production/'},
{expand: true, src: ['.htaccess', '404.html', 'apple-touch-icon-precomposed.png', 'crossdomain.xml', 'favicon.ico', 'humans.txt', 'index.html', 'index.php', 'LICENSE.md', 'README.md', 'robots.txt'], dest: '../production/'}
]
}
},
php: {
watch: {
options: {
livereload: true,
bin: 'C:/php/php.exe',
ini: 'C:/php/php.ini',
base: '../production',
port: 8000
}
}
},
watch: {
options: {
livereload: true
},
site: {
files: ['*.html', '*.php', 'public/*.html', 'public/*.php'],
tasks: ['php'],
options: {
spawn: false
}
}
}
[...]
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-php');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['uglify', 'replace', 'stylus', 'cssmin', 'copy:watch', 'php:watch', 'watch']);
I always need to restart the script, to re-send the files into "production" folder.
Thank You for your help!
UPDATE
I made an alter solution: everything happening in development folder, and if I want I can push to the production folder with command line. This way I see the final product in local PHP webserver in the development folder, not production.
grunt.registerTask('default', ['uglify', 'replace', 'stylus', 'cssmin', 'php:watch', 'watch']);
grunt.registerTask('copytoproduction', ['copy']);
PC Specs:
Windows 7 Enterprise x64
I'm running grunt.js on a project and recently started receiving an error when attempting to run 'grunt watch'.
Grunt worked fine yesterday but today I started seeing:
Running "watch" task
Waiting...Fatal error: listen EACCES
I read another question here: Cloud 9 and Grunt.js
that lead me to remove 'options: {livereload: true}' from Gruntfile.js
running watch again works as intended. Is there a way to reconfigure grunt or livereload to get livereload working with Grunt again?
Also, just running the command 'grunt' runs all of the tasks without errors.
Thanks.
Edit: Gruntfile.js follows:
module.exports = function(grunt) {
grunt.initConfig({
jshint: {
all: ['js/src/*.js']
},
uglify: {
options: {
mangle: {
except: ['jQuery']
},
preserveComments: 'none'
},
'js/main.min.js': ['js/tmp/debug.js']
},
compass: {
options: {
config: '.compass.rb',
sassDir: 'sass',
cssDir: '.'
},
my_target: {
}
},
cmq: {
my_target: {
files: { 'tmp': ['style.css'] }
}
},
cssmin: {
minify: {
keepSpecialComments: 0,
expand: true,
cwd: 'tmp/',
src: ['style.css'],
dest: '.',
ext: '.css'
}
},
imagemin: {
png: {
options: {
optimizationLevel: 7
},
files: [{
expand: true,
cwd: 'img',
src: ['**/*.png'],
dest: 'img',
ext: '.min.png'
}]
},
jpg: {
options: {
progressive: true
},
files: [{
expand: true,
cwd: 'img',
src: ['**/*.jpg'],
dest: 'img',
ext: '.min.jpg'
}]
},
gif: {
options: {
progressive: true
},
files: [{
expand: true,
cwd: 'img',
src: ['**/*.gif'],
dest: 'img',
ext: '.min.gif'
}]
}
},
clean: ["tmp"],
watch: {
scripts: {
files: 'js/src/*.js',
tasks: ['jshint', 'concat', 'uglify', 'clean'],
options: { livereload: true }
},
css: {
files: 'sass/*.scss',
tasks: ['compass', 'cmq', 'cssmin', 'clean'],
options: { livereload: true }
}
},
concat: {
debug: {
src: ['js/src/**/*.js'],
dest: 'js/tmp/debug.js'
}
},
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-combine-media-queries');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', ['jshint', 'concat', 'uglify', 'compass', 'cmq', 'cssmin', 'clean']);
}
It appears you have 2 live reload servers configured to spawn on the same default port. Instead of specifying livereload: true twice in your watch config, just configure it once:
watch: {
options: { livereload: true },
scripts: {
files: 'js/src/*.js',
tasks: ['jshint', 'concat', 'uglify', 'clean'],
},
css: {
files: 'sass/*.scss',
tasks: ['compass', 'cmq', 'cssmin', 'clean'],
},
},
Then it will only spawn 1 live reload server.
Another option is to create a watch target specifically for live reload and watch your destination files:
watch: {
scripts: {
files: 'js/src/*.js',
tasks: ['jshint', 'concat', 'uglify', 'clean'],
},
css: {
files: 'sass/*.scss',
tasks: ['compass', 'cmq', 'cssmin', 'clean'],
},
lr: {
options: { livereload: true },
files: ['js/*.js', 'css/*.css'],
},
},
In my never ending brilliance, I had fireapp running on a separate project. fireapp has the option to enable livereload.
Inititally when I asked the question it was because I had two calls within Gruntfile.js as Kyle correctly surmised. This solution didn't work for me because I still had two separate versions of livereload running with fireapp watching a separate project.
Kyle's second option did the trick.
Thanks!
You don't have permission to make some changes .
Go to project folder.
Open terminal in project folder & execute following command .
sudo chmod -R a+rwx ./
I just started using Grunt and I already may have a problem. So, here is what my Gruntfile.js looks like :
module.exports = function (grunt) {
grunt.initConfig({
// Ability to access the package.json informations
pkg: grunt.file.readJSON('package.json'),
// SASS compilation
sass: {
dist: {
options: {
style: 'compressed'
},
expand: true,
cwd: './sass/',
src: 'main.scss',
dest: './css/',
ext: '.css'
},
dev: {
options: {
style: 'expanded',
debugInfo: true,
lineNumbers: true
},
expand: true,
cwd: './sass/',
src: 'main.scss',
dest: './css/',
ext: '.css'
}
}
});
};
And when I run grunt sass:dev, it always returns me Warning: Task "sass:dev" not found. Use --force to continue.
As I'm starting with it, I took a look at the doc and can't find where I may have gone wrong... And yes, dependencies are correctly installed.
You need to make sure the task is registered, after the initConfig section.
module.exports = function (grunt) {
grunt.initConfig({
// ...
});
grunt.loadNpmTasks('grunt-contrib-sass');
};
Below is my Grunt file. My watch:news command doesn't appear to work and I'm not sure why.
When I run in verbose mode I can see that all the NPM modules are loaded without an issue, and it verifies that the watch:news task is running as it should be but then it just doesn't pick up that any changes have occurred?
I'm sure it's probably a typo or some small/easily fixable issue, I just can't spot it?
Any help greatly appreciated!
module.exports = function (grunt) {
/*
Grunt installation:
-------------------
npm install -g grunt-cli
npm install -g grunt-init
npm init (creates a `package.json` file)
Project Dependencies:
---------------------
npm install grunt --save-dev
npm install grunt-contrib-watch --save-dev
npm install grunt-contrib-jshint --save-dev
npm install grunt-contrib-uglify --save-dev
npm install grunt-contrib-requirejs --save-dev
npm install grunt-contrib-sass --save-dev
npm install grunt-contrib-imagemin --save-dev
Example Usage:
--------------
grunt -v
grunt release -v
*/
// Project configuration.
grunt.initConfig({
// Store your Package file so you can reference its specific data whenever necessary
pkg: grunt.file.readJSON('package.json'),
dir: {
static: './tabloid/webapp/static/',
static_js: '<%= dir.static %>' + 'js/',
static_sass: '<%= dir.static %>' + 'sass/',
static_css: '<%= dir.static %>' + 'stylesheets/',
static_img: '<%= dir.static %>' + 'img/'
},
jshint: {
files: ['<%= dir.static %>**/*.js',
'!<%= dir.static_js %>jasmine/lib/**/*.js',
'!<%= dir.static_js %>build.js',
'!<%= dir.static_js %>compiled/**/*.js',
'!<%= dir.static_js %>locator/**/*.js',
'!<%= dir.static_js %>msie/**/*.js',
'!<%= dir.static_js %>vendor/**/*.js'],
options: {
curly: true,
eqeqeq: true,
immed: true,
latedef: true,
noarg: true,
sub: true,
undef: true,
boss: true,
eqnull: true,
browser: true,
multistr: true,
newcap: false,
globals: {
// AMD
module: true,
require: true,
requirejs: true,
define: true,
// Environments
console: true,
// General Purpose Libraries
$: true,
jQuery: true,
EventEmitter: true,
// Testing
sinon: true,
describe: true,
it: true,
expect: true,
beforeEach: true,
afterEach: true
}
}
},
requirejs: {
compile: {
options: {
baseUrl: '<%= dir.static_js %>',
paths: {
'jquery-1': 'vendor/jquery-1/jquery.min',
'jquery': 'vendor/jquery-2/jquery.min',
'domReady': 'vendor/require/domReady',
'translation': 'module/translations/news'
},
exclude: ['config', 'jquery' ],
name: 'define',
out: '<%= dir.static_js %>compiled/all.js',
fileExclusionRegExp: /^\.|node_modules|Gruntfile|\.md|package.json/
}
}
},
sass: {
dist: {
options: {
style: 'compressed',
require: ['<%= dir.static_sass %>helpers/url64.rb']
},
expand: true,
cwd: '<%= dir.static_sass %>',
src: ['*.scss', '!_*.scss'],
dest: '<%= dir.static_css %>',
ext: '.css'
},
dev: {
options: {
style: 'expanded',
debugInfo: true,
lineNumbers: true,
require: ['<%= dir.static_sass %>helpers/url64.rb']
},
expand: true,
cwd: '<%= dir.static_sass %>',
src: ['*.scss', '!_*.scss'],
dest: '<%= dir.static_css %>',
ext: '.css'
},
news: {
options: {
style: 'expanded',
debugInfo: true,
lineNumbers: true,
require: ['<%= dir.static_sass %>helpers/url64.rb']
},
expand: true,
cwd: '<%= dir.static_sass %>/services/news/',
src: ['*.scss'],
dest: '<%= dir.static_css %>/services/news/',
ext: '.css'
}
},
// `optimizationLevel` is only applied to PNG files (not JPG)
imagemin: {
png: {
options: {
optimizationLevel: 7
},
files: [
{
expand: true,
cwd: '<%= dir.static %>img/',
src: ['**/*.png'],
dest: '<%= dir.static %>img/',
ext: '.png'
}
]
},
jpg: {
options: {
progressive: true
},
files: [
{
expand: true,
cwd: '<%= dir.static %>img/',
src: ['**/*.jpg'],
dest: '<%= dir.static %>img/',
ext: '.jpg'
}
]
}
},
// Run: `grunt watch -v` from command line for this section to take effect
// The -v flag is for 'verbose' mode, this means you can see the Sass files being compiled along with other important information
watch: {
all: {
files: ['<%= jshint.files %>', '<%= sass.dev.src %>'],
tasks: ['default']
},
news: {
files: ['<%= sass.news.src %>'],
tasks: ['news']
}
}
});
// Load NPM Tasks
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-requirejs');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-imagemin');
// Default Task
grunt.registerTask('default', ['jshint', 'sass:dev']);
// News Task
grunt.registerTask('news', ['sass:news']);
// Release Task
grunt.registerTask('release', ['jshint', 'requirejs', 'sass:dist', 'imagemin']);
};
Figured out the problem was to do with watching <%= sass.news.src %> which doesn't work as we're using Grunt's expanded directory globbing.
The solution was to directly reference the folder I wanted to watch: <%= dir.static_sass %>**/*.scss'