gulp with object files key as dest and array as source - gruntjs

I've got this json file
{
"vendor":{
"css": {
"public/build/css/vendor.min.css": [
"public/bower_components/bootstrap/dist/css/bootstrap.min.css"
]
},
"js": {
"public/build/js/vendor.min.js": [
"public/bower_components/lodash/dist/lodash.min.js",
"public/bower_components/jquery/dist/jquery.min.js",
"public/bower_components/bootstrap/dist/js/bootstrap.min.js",
"public/bower_components/angular/angular.min.js",
"public/bower_components/angular-ui-router/release/angular-ui-router.min.js",
"public/bower_components/restangular/dist/restangular.min.js"
]
}
},
"scripts":{
"css": {
"public/build/css/scripts.min.css": [
"public/*/assets/css/*.css"
]
},
"js": {
"public/build/js/scripts.min.js": [
"public/init.js",
"public/system/system.js",
"public/system/controllers/*.js",
"public/system/directives/*.js",
"public/system/filters/*.js",
"public/system/routes/*.js",
"public/system/services/*.js",
"public/users/users.js",
"public/users/controllers/*.js",
"public/users/directives/*.js",
"public/users/routes/*.js",
"public/users/services/*.js"
]
}
}
}
my grunt file
'use strict';
var paths = {
js: ['Gruntfile.js', 'tasks/laravel.js', 'public/**/*.js', '!public/build/**', '!public/bower_components/**'],
html: ['public/**/views/**'],
css: ['public/**/assets/css/*.css', '!public/bower_components/**'],
php: ['app/**/*.php', '!vendor/**']
};
module.exports = function(grunt) {
require('time-grunt')(grunt);
// Project Configuration
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
assets: grunt.file.readJSON('app/config/assets.json'),
clean: ['public/build'],
watch: {
css: {
files: paths.css,
tasks: ['csslint'],
options: {
livereload: true
}
},
html: {
files: paths.html,
options: {
livereload: true
}
},
js: {
files: paths.js,
tasks: ['jshint'],
options: {
livereload: true
}
},
php: {
files: paths.php,
options: {
livereload: true
}
}
},
jshint: {
all: {
src: paths.js,
options: {
jshintrc: true
}
}
},
csslint: {
options: {
csslintrc: '.csslintrc'
},
src: paths.css
},
laravel:{
dist:{}
},
concurrent: {
tasks: ['laravel', 'watch'],
options: {
logConcurrentOutput: true
}
},
concat:{
productionCssVendor:{
files: '<%= assets.vendor.css %>',
nonull: true
},
productionJsVendor:{
files: '<%= assets.vendor.js %>',
nonull: true
}
},
cssmin: {
productionScripts: {
files: '<%= assets.scripts.css %>'
}
},
uglify: {
options: {
mangle: false
},
productionScripts: {
files: '<%= assets.scripts.js %>'
}
}
});
grunt.loadTasks('tasks');
require('load-grunt-tasks')(grunt);
grunt.registerTask('default', ['jshint','concurrent']);
grunt.registerTask('prod', ['clean', 'concat', 'cssmin','uglify']);
};
how can I get the same thing with gulp for instance for concat and uglify ?
better than this :(
var fs = require('fs');
var assets = JSON.parse(fs.readFileSync('app/config/assets.json', 'utf8'));
var jsVendor = Object.keys(assets.vendor.js);
var srcJsVendor = assets.vendor.js[jsVendor[0]];
var chunks = jsVendor[0].split('/');
var concatFilename = chunks.pop();
gulp.task('concat', function() {
return gulp.src(srcJsVendor)
.pipe(concat(concatFilename))
.pipe(gulp.dest(chunks.join('/')+'/'))
.pipe(notify({ message: 'Scripts task complete' }));
});

Related

PostCSS not compiling but executes successfully

I am a grunt newbie...
Please read through my grunt file bellow. Everything executes successfully, however the PostCSS function doesn't do it's job. If I remove the expanded and compressed calls within it and just use the options and dist then it works, but when I try to double up on the calls it doesn't work. What do I need to do?
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
scripts_jquery: {
options: {
beautify: false,
mangle: false
},
files: {
'js/vendor/jquery-1.12.4.min.js': ['js/vendor/jquery-1.12.4.js']
}
},
scripts_functions: {
options: {
beautify: false,
mangle: false
},
files: {
'js/functions.min.js': ['js/functions.js']
}
},
scripts_expanded: {
options: {
beautify: true,
mangle: false,
sourceMap: true,
sourceMapName: 'js/scripts.js.map'
},
files: {
'js/scripts.js': ['js/plugins/**/*.js']
}
},
scripts_compressed: {
options: {
beautify: false,
mangle: false,
sourceMap: true,
sourceMapName: 'js/scripts.min.js.map'
},
files: {
'js/scripts.min.js': ['js/plugins/**/*.js']
}
}
},
sass: {
compile: {
options: {
indentType: 'tab',
indentWidth: 1,
linefeed: 'crlf',
sourceMap: false
},
files: {
'css/styles.css': 'css/styles.scss',
'css/styles.min.css': 'css/styles.scss'
}
}
},
postcss: {
css_expanded: {
options: {
map: {
inline: false,
annotation: 'css/'
},
processors: [
require('autoprefixer')({
browsers: 'last 2 versions'
})
]
},
dist: {
src: 'css/styles.css'
}
},
css_compressed: {
options: {
map: {
inline: false,
annotation: 'css/'
},
processors: [
require('autoprefixer')({
browsers: 'last 2 versions'
}),
require('cssnano')()
]
},
dist: {
src: 'css/styles.min.css'
}
}
},
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: 'img/',
src: ['img/**/*.{png,jpg,gif}'],
dest: 'img/'
}]
}
},
svgmin: {
options: {
plugins: [{
removeViewBox: false
}, // don't remove the viewbox atribute from the SVG
{
removeEmptyAttrs: false
} // don't remove Empty Attributes from the SVG
]
},
dist: {
files: [{
expand: true,
cwd: 'img/',
src: ['img/**/*.svg'],
dest: 'img/'
}]
}
},
svgstore: {
options: {
prefix: 'icon-',
cleanup: true,
includedemo: true,
svg: {
viewBox: '0 0 100 100',
xmlns: 'http://www.w3.org/2000/svg'
}
},
dist: {
files: {
'svg/svg-sprite.svg': ['img/**/*.svg']
},
}
},
watch: {
scripts: {
files: ['js/plugins/**/*.js', 'js/vendor/jquery-1.12.4.js', 'js/functions.js'],
tasks: ['uglify'],
options: {
livereload: true,
},
},
css: {
files: ['css/**/*.scss'],
tasks: ['sass', 'postcss'],
options: {
livereload: true,
},
},
images: {
files: ['img/**/*.{png,jpg,gif}'],
tasks: ['imagemin'],
options: {
livereload: true,
},
},
svgs: {
files: ['img/**/*.svg'],
tasks: ['svgmin', 'svgstore'],
options: {
livereload: true,
},
}
},
});
require('load-grunt-tasks')(grunt);
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-postcss');
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-svgmin');
grunt.loadNpmTasks('grunt-svgstore');
// Default task(s).
grunt.registerTask('default', ['watch']);
};
You don't need the dist property inside each target. dist is a name for the default target. Remove it and the task should work:
postcss: {
css_expanded: {
options: {
map: {
inline: false,
annotation: 'css/'
},
processors: [
require('autoprefixer')({
browsers: 'last 2 versions'
})
]
},
src: 'css/styles.css'
},
css_compressed: {
options: {
map: {
inline: false,
annotation: 'css/'
},
processors: [
require('autoprefixer')({
browsers: 'last 2 versions'
}),
require('cssnano')()
]
},
src: 'css/styles.min.css'
}
},
There is actually a thread on this here: https://github.com/nDmitry/grunt-postcss/issues/67

Grunt Watch not creating files on save

The tasks in my grunt file are running without errors but the files i'm asking it to create aren't being compiled. They are created if I simple run 'grunt' but if I use 'grunt watch' and save a file it doesn't update.
Particularly I am working on file 'script/src/latestNews.js' so on save this should concat with others to create 'script/dist/main.js', which it does. But it does not then go on to create 'dist/build.min.js' like it should.
module.exports = function (grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
mangle: false
},
target: {
files: {
'script/dist/main.min.js':'script/dist/main.js'
}
},
build: {
files: {
'script/dist/build.min.js':'script/dist/build.min.js'
}
}
},
concat: {
options: {
stripBanners: true,
banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
'<%= grunt.template.today("yyyy-mm-dd") %> */',
},
srcJS: {
src: ['script/src/menu.js',
'script/src/custom_plugins.js',
'script/src/banner.js',
'script/src/latestNews.js',
'script/src/officers.js',
'script/src/eventsCalendar.js',
'script/src/combinedSocialMedia.js',
'script/src/haveYourSay.js',
'script/src/photoGallery.js',
'script/src/countdown.js'
],
dest: 'script/dist/main.js'
},
css: {
src: ['style/libs/bootstrap.min.css',
'style/libs/bootstrap-theme.min.css',
'style/src/css/*'],
dest: 'style/dist/build.min.css'
},
build: {
src: ['script/libs/jquery.easing.min.js',
'script/dist/main.js',
'script/libs/bootstrap.min.js',
'script/libs/velocity.min.js',
'script/libs/date.js',
'script/libs/jquery.timeago.js',
'script/libs/owl.carousel.min.js'
],
dest: 'script/dist/build.min.js'
}
},
jshint: {
main: 'script/dist/main.js'
},
watch: {
js: {
files: 'script/src/*',
tasks: ['concat:srcJS', 'uglify:target', 'jshint:main', 'copy:js']
},
css: {
files: 'style/src/css/*',
tasks: ['copy:css']
},
less: {
files: 'style/src/less/*',
tasks: ['less', 'copy:css']
},
html: {
files: '*.html',
tasks: ['validation', 'bootlint']
}
},
clean: {
js: [
'script/dist/main.min.js',
'dist/build.min.js',
'dist/build.min.css'
]
},
copy: {
css: {
files: [
{ expand: true, 'src' : 'style/src/css/main.css',
'dest' : 'style/dist/', flatten: true,
rename: function(dest, src) {
return dest + src.replace('main','build.min');
}
},
{ expand: true, 'src' : 'style/dist/build.min.css',
'dest' : 'dist/', flatten: true },
]
},
js: {
files: [
{ expand: true, 'src' : 'script/dist/build.min.js',
'dest' : 'dist/', flatten: true }
]
}
},
validation: {
options: {
reset: grunt.option('reset') || false,
stoponerror: true,
relaxerror: ['Bad value X-UA-Compatible for attribute http-equiv on element meta.'] //ignores these errors
},
files: {
src: ['homepage.html']
}
},
bootlint: {
options: {
stoponerror: false,
relaxerror: ['E001', 'E003', 'E031', 'W001', 'W002', 'W003', 'W005', 'W007', 'W009', 'E013']
},
files: ['homepage.html'],
},
less: {
build: {
options: {
paths: ["style/src/less"],
cleancss: true,
compress: true
},
files: {
"style/src/css/main.css": "style/src/less/main.less"
}
}
}
});
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-html-validation');
grunt.loadNpmTasks('grunt-bootlint');
// Default task(s).
//grunt.registerTask('default', ['concat:srcJS','concat:css','uglify','jshint:main']);
grunt.registerTask('default', [
'validation',
'bootlint',
'concat:srcJS',
'jshint:main',
'uglify:target',
'clean',
'concat:build',
'uglify:build',
'less',
'copy'
]);
};
It looks like the array of tasks that are run by your watch:js task is simply missing a couple of critical tasks. Specifically you are not running the concat:build and uglify:build tasks.
Your current array of tasks:
['concat:srcJS', 'uglify:target', 'jshint:main', 'copy:js']
Complete/fixed array of tasks:
['concat:srcJS', 'uglify:target', 'jshint:main', 'concat:build', 'uglify:build', 'copy:js']
Replacing your current array with the fix that I supplied should solve your issue.

Grunt - nodemon + watch

i'm new to grunt so i'm guessing i'm doing something simple really wrong. I'm using angular-client-side-auth for my single page app and i wanted to add grunt-contrib-sass and grunt-contrib-watch into Gruntfile.js. Here's the problem, when i start the server using nodemon, the watch never run. I tried concurrent, but no luck.
Here's my Gruntfile.js:
module.exports = function(grunt) {
// Load tasks
grunt.loadNpmTasks('grunt-concurrent');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-mocha-test');
grunt.loadNpmTasks('grunt-env');
grunt.loadNpmTasks('grunt-nodemon');
grunt.loadNpmTasks('grunt-contrib-clean');
//require('load-grunt-tasks')(grunt); // npm install --save-dev load-grunt-tasks
grunt.initConfig({
mochaTest: {
test: {
options: {
reporter: 'spec'
},
src: ['server/tests/**/*.js']
}
},
env : {
options : {
//Shared Options Hash
},
dev : {
NODE_ENV : 'development'
},
test : {
NODE_ENV : 'test'
}
},
nodemon: {
dev: {
script: 'server.js',
}
},
watch: {
//options: { nospawn: true, livereload: true },
sass: {
files: ["client/css/styles.sass"],
tasks: ['sass'],
},
cssmin: {
files: ["client/css/styles.sass"],
tasks: ['cssmin'],
}
},
sass: {
dist: {
files: {
'client/css/styles.css': 'client/css/styles.scss'
}
}
},
cssmin: {
options: {
shorthandCompacting: false,
roundingPrecision: -1
},
target: {
files: [{
expand: true,
cwd: 'client/css',
src: ['styles.css', '!*.min.css'],
dest: 'client/css',
ext: '.min.css'
}]
}
},
concurrent: {
dev: {
options: {
logConcurrentOutput: true
},
tasks: ['watch', 'nodemon:dev']
}
},
clean: ["node_modules", "client/components"]
});
grunt.registerTask('serverTests', ['env:test', 'mochaTest']);
grunt.registerTask('test', ['env:test', 'serverTests']);
grunt.registerTask('dev', ['env:dev', 'concurrent:dev']);
};

Grunt isn't making changes when watching

Grunt says waiting... but doesn't make changes to sass while watching. I have to run grunt on the command line every time I want it to run and change things. The thing I need it to update the most is the sass to css. But it's not working. Please help.
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// package options
express: {
server: {
options: {
port: 3000,
hostname: 'localhost',
bases: 'public' // the 'public' folder for your project
}
}
},
jshint: {
options: {
jshintrc: '.jshintrc' // jshint config file
},
all: [
'Gruntfile.js',
'js/*.js'
]
},
concat: {
basic: {
src: [
'bower_components/jquery/dist/jquery.js',
'bower_components/foundation/js/foundation/foundation.js',
'dev/js/jquery.royalslider.custom.min.js',
'dev/js/royalslider.js',
'dev/js/megamenu_plugins.js',
'dev/js/megamenu.min.js',
'dev/js/megamenu.js',
'dev/js/app.js'
],
dest: 'dev/tmp/app.js'
},
extras: {
src: [
'bower_components/modernizr/modernizr.js'
],
dest: 'dev/tmp/modernizr.js'
}
},
sass: {
options: {
includePaths: ['bower_components/foundation/scss']
},
dist: {
options: {
outputStyle: 'compressed'
},
files: {
'public/build/css/app.min.css': 'dev/scss/app.scss'
}
}
},
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: 'dev/img/',
src: ['**/*.{png,jpg,gif}'],
dest: 'public/build/img/'
}]
}
},
uglify: {
build: {
files: {
'public/build/js/modernizr.min.js': 'dev/tmp/modernizr.js',
'public/build/js/app.min.js': 'dev/tmp/app.js'
}
}
},
clean: {
dist: [
'tmp/**',
'public/build/img/**'
]
},
watch: {
grunt: {
files: ['Gruntfile.js']
},
css: {
files: ['scss/*.scss'],
tasks: ['newer:sass'],
options: {
spawn: false
}
},
js: {
files: [
'js/*.js'
],
tasks: ['newer:concat', 'newer:uglify'],
options: {
livereload: true,
atBegin: true
}
},
imagemin: {
files: [
'img/**'
],
tasks: ['newer:imagemin'],
options: {
livereload: true,
atBegin: true
}
}
}
});
// Load tasks
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-notify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-express');
grunt.loadNpmTasks('grunt-newer');
// Register default tasks
grunt.registerTask('build', ['sass']);
grunt.registerTask('default', ['build','watch']);
}

How to ignore one file in a grunt-watch task?

'use strict';
module.exports = function(grunt) {
// Project Configuration
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
jade: {
files: ['app/views/**'],
options: {
livereload: true,
},
},
js: {
files: ['!public/build.js', 'gruntfile.js', 'server.js', 'app/**/*.js', 'public/js/**', 'test/**/*.js'],
tasks: ['uglify', 'jshint'],
options: {
livereload: true,
},
},
html: {
files: ['public/views/**'],
options: {
livereload: true,
},
},
css: {
files: ['public/css/**'],
options: {
livereload: true
}
}
},
jshint: {
all: {
src: ['!public/build.js', 'gruntfile.js', 'server.js', 'app/**/*.js', 'public/js/**', 'test/**/*.js'],
options: {
jshintrc: true
}
}
},
uglify: {
options: {
mangle: false
},
dist: {
files: {
'public/build.js': ['public/js/**/*.js']
}
}
},
nodemon: {
dev: {
options: {
file: 'server.js',
args: [],
ignoredFiles: ['public/**'],
watchedExtensions: ['js'],
nodeArgs: ['--debug'],
delayTime: 1,
env: {
PORT: 3000
},
cwd: __dirname
}
}
},
concurrent: {
tasks: ['nodemon', 'watch', 'uglify'],
options: {
logConcurrentOutput: true
}
},
mochaTest: {
options: {
reporter: 'spec',
require: 'server.js'
},
src: ['test/mocha/**/*.js']
},
env: {
test: {
NODE_ENV: 'test'
}
},
karma: {
unit: {
configFile: 'test/karma/karma.conf.js'
}
}
});
//Load NPM tasks
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-mocha-test');
grunt.loadNpmTasks('grunt-karma');
grunt.loadNpmTasks('grunt-nodemon');
grunt.loadNpmTasks('grunt-concurrent');
grunt.loadNpmTasks('grunt-env');
//Making grunt default to force in order not to break the project.
grunt.option('force', true);
//Default task(s).
grunt.registerTask('default', ['jshint', 'concurrent']);
//Test task.
grunt.registerTask('test', ['env:test', 'mochaTest', 'karma:unit']);
};
I'm trying to exclude the public/build.js file, but it doesn't seem to be working. What am I doing wrong?
Edit:
Why do you need to exclude it from your watch? I do not see any glob pattern in your watch:js task that would look for changed in that file to begin with.
Original Answer:
Have you tried moving '!public/build.js' as the last include in your watch task?
The part of the documentation sited:
"Patterns are processed in-order, with !-prefixed matches excluding matched files from the result set"
Makes me think that the excluded file at the beginning gets added back in with the 'public/js/**' pattern.
I would try changing your js watch task to this.
js: {
files: ['gruntfile.js', 'server.js', 'app/**/*.js', 'public/js/**', 'test/**/*.js', '!public/build.js'],
tasks: ['uglify', 'jshint'],
options: {
livereload: true,
},
},
Add the ! to the beginning of the file name. !public/build.js
You could also add a jshintignore file with all the files you want to ignore inside that.

Resources