I have written below code in gruntFile.js.
typescript: {
base: {
options: {
target: 'es5',
sourceMap: true,
noImplicitAny: true
}
},
default: {
files: [
{ src: 'source/tests/**/*.ts', dest: 'build'},
{ src: 'source/scripts/**/*.ts', dest: 'build'}
]
}
},
and I am trying to run "grunt typescript" command from command line. It is showing below error.
I have tryed "grunt typescript --force" command also. but still it is not working.
still it is not create build folder and it means that task is not working properly. Thanks in advance.
EDIT:- I have change my gruntfile.js to below as suggest in answer.
typescript: {
base: {
src: ['source/tests/**/*.ts'],
dest: 'build/',
options: {
target: 'es5',
sourceMap: true,
noImplicitAny: true
}
},
}
But still I am facing same problem.
Looking at the most current documentation that I could find for grunt-typescript, your syntax is wrong. I have a feeling that you actually want to be using grunt-ts. It's also the plugin I know of that is compatible with the syntax you've supplied.
My personal opinion: Use grunt-ts, it's been much easier to work with, and I've gone through a few iterations of trying out a bunch of tools to get to our current build environment.
Related
I installed modernizr via Yarn and am wanting to build a lean file using only the aspects of modernizr that are actually needed. To do that, I'm attempting to use grunt-modernizr (https://github.com/Modernizr/grunt-modernizr), but the grunt task is not actually outputting a file.
Here is my grunt config:
modernizr: {
dist: {
devFile: false,
outputFile: './public/lib/js/custom-modernizr.js',
files: {
src: [
'./public/lib/js/main.min.js',
'./public/lib/js/vendor.min.js',
'./public/lib/css/main.min.css',
'./public/lib/css/basics-of-ed.min.css',
]
}
}
},
In looking at the command line, it appears that things are working properly but the file is not actually outputting (screenshot below). What am I missing?
I cannot seem to find an easy way to copy all the files from Polymer to using grunt-bower-task.
grunt.initConfig({
bower: {
install: {
options: {
targetDir: 'wwwroot/lib',
layout: 'byComponent',
install: true,
copy: true,
verbose: true,
cleanTargetDir: false,
bowerOptions: {}
}
}
}
I understand that only the main files defined inside each element's bower.json file get copied over. I am also aware that I could put a exportsOverride section in my own bower.json to include more files like this -
"exportsOverride": {
"*": {
"": "*.*",
"demo": "demo/*.*",
"test": "test/*.*"
}
}
But this doesn't cover all cases as some elements have more sub-folders than just demo and test. Do I have to manually look them all up and add their paths to the exportsOverride, or there's an easy way that I've overlooked?
hate to provide a sample of a fail....
FWIW recently , i had very similar issue ... worked it and failed
what i did is abandon the attempt to flatten everything out in the "dist" tag for a first polymer project. Rather i just ran minify/ugly on one or two elements leaving the HTTP2 type file structure ( deep and many many, dirs/files. )
// the process belo NG . Manual edit needed on "polymer-min.html" go end and chg the js file name
copy: {
main: {
files: [
// includes files within path
{expand: true, src: ['*html'], dest: 'dest/', filter: 'isFile'},
// includes files within path and its sub-directories
{expand: true, src: ['js/**', 'images/**' ,'css/**' ,'elements/**' ,'bower_components/**'], dest: 'dest/'},
{ src: ['tmp/csp/build-csp.html'], dest: 'dest/bower_components/cast-button-polymer/cast-button-polymer-min.html',
filter: 'isFile',
options: {
process: function (content, srcpath) {
return content.replace(/build-csp.js/g,"cast-button-polymer-min.js");
},
},
},
{ src: ['tmp/csp/build-csp-min.js'], dest: 'dest/bower_components/cast-button-polymer/cast-button-polymer-min.js', filter: 'isFile'},
],
},
},
I have the following setup in Grunt for the concat and minification of my projects css
cssmin: {
options: {
},
concat: {
files: {
'dist/app.css': [
'tmp/*.css',
'app/theme/css/vendors/fontello.css',
'app/theme/js/vendors/revolution/css/settings.css',
'app/theme/css/styles.css',
'app/theme/css/media-queries.css',
'app/app.css'
]
}
},
min: {
files: [{
src: 'dist/app.css',
dest: 'dist/app.css'
}]
}
},
It works fine with the exception that, as far as I can tell its removed the following import statement
#import url("http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic");
And all 3rd party css files have relative image paths which are not resolved. I can see cssmin uses clean css which should be able to help handle these issues but after hours of searching and reading the docs I can't any clear examples or doucmentation on how to configure the above to solve this?
I used Ze Rubeus suggestion of moving my font import statement into the HTML instead (a little annoying as it means modifying a 3rd party css file). But I found the option for fixing the css paths which is
rebase: true,
relativeTo: './'
My cssmin configuration now looks like
cssmin: {
options: {
rebase: true,
relativeTo: './'
},
concat: {
files: {
'dist/app.css': [
'tmp/*.css',
'app/theme/css/vendors/fontello.css',
'app/theme/js/vendors/revolution/css/settings.css',
'app/theme/css/styles.css',
'app/theme/css/media-queries.css',
'app/app.css'
]
}
},
min: {
files: [{
src: 'dist/app.css',
dest: 'dist/app.css'
}]
}
}
And everything is working :)
You have to change all you import PATH depend on this directory 'dist/app.css'
And instead of css font import I advice you to use the HTML link like the following
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' type='text/css'>
make sure to change all url Path's on these directory's :
'tmp/*.css',
'app/theme/css/vendors/fontello.css',
'app/theme/js/vendors/revolution/css/settings.css',
'app/theme/css/styles.css',
'app/theme/css/media-queries.css',
'app/app.css'
depend on this output 'dist/app.css': because there is no task in gruntjs who correct the import Path in css files for you !
regarding your code the watch task need's to be something like so :
watch: {
css: {
files: ['tmp/*.css',
'app/theme/css/vendors/fontello.css',
'app/theme/js/vendors/revolution/css/settings.css',
'app/theme/css/styles.css',
'app/theme/css/media-queries.css',
'app/app.css'],
tasks: ['concat','cssmin'],
options: { spawn: false }
}
},
And execute this command grunt watch in your terminal to keep automatically tracking for changes in these files and apply these tasks .
I have the following snippet in my Gruntfile.js:
imagemin: {
options: {
optimizationLevel: 7,
cache: false
},
dist: {
files: [{
expand: true,
cwd: 'Assets/img/',
src: ['**/*.{png,jpg,gif}', '!optimised/*.*'],
dest: 'Assets/img/optimised/'
}]
}
}
When I run grunt imagemin the files in /optimised get optimised again, what's the correct pattern to make sure I exclude whatever files I have in my 'optimised' folder?
I've tried the globbing pattern ! that's used to negate a match but can't make it work.
Just found the answer, maybe this might help someone else as I couldn't find anything like it on SO.
src: ['**/*.{png,jpg,gif}', '!optimised/**']
More about globbing patterns: http://gruntjs.com/configuring-tasks#globbing-patterns
My livereload is "working" in that it live reloads the page when a file is changed, but only if I modify the file directly. If the file is generated through the grunt stylus or jade compiler, nothing happens.
When I look at grunt with verbose turned on, the Live reloading root.css... line appears only if I save root.css directly. If root.css is modified through the stylus compiler, the line does not appear. It's as if watch doesn't detect the file has been changed if it's changed through a compiler. This same issue occurs with jade as well.
Here's my stylus task (trimmed):
stylus: {
options: {
compress: false,
use: [
require('autoprefixer-stylus')
]
},
src: [
'app/styl/**/*.styl'
],
dest: 'build/css/root.css'
}
And here's my watch task (trimmed):
livereload: {
options: {
livereload: 1337,
},
files: 'build/**/*'
},
stylus: {
files: [
'app/styl/**/*.styl',
],
tasks: ['stylus:dev']
},
I really hope I'm just doing something stupid. I can't find any problems similar to this one.
EDIT:
Just in case this helps, I discovered that by changing my grunt task from running ['clean','jade:dev', 'stylus:dev', 'connect:dev', 'watch'] to only running ['connect:dev', 'watch'], livereload works as intended once, then never again. (Modifying the css directly still works though.)
EDIT 2:
I was able to fix this by adding livereload to each specific task in watch, like so:
livereload: {
options: {
livereload: 1337,
},
files: 'build/**/*'
},
stylus: {
files: [
'app/styl/**/*.styl',
],
tasks: ['stylus:dev'],
options: {
livereload: 1337
}
},
As to why this works, I have no idea. If anyone can shed some light on this, it'd be much appreciated. Though to be honest, I don't know why I didn't try this earlier.