How to copy files using regex with grunt.js? - regex

I want to copy all js into one folder which belongs to angular Like angular, angular-cookies, angular-resource and angular-route etc.
I was trying to add regex for cwd but it fails to copy.
Folder Structure:
app(route folder)
->angular
->angular-cookies
->angular-resource
->angular-route
copy: {
main: {
files: [
{expand: true, cwd: '<%= yeoman.app %>/angular*', src: ['*.js'], dest:'angular'},
]
}
}

Related

Webpack TypeScript and xgettext translations

I have a Django app and am using Django's i18n module to help translating my strings. For translating JavaScript, I run
python manage.py makemessages -d djangojs
which adds all marked strings to a .po file. This works quite well for all my boring .js files in my static folder. However, we are starting to use webpack to pack some typescript (.tsx files) into a bundle.js file. This file is copied to the static folder after building, so I expected Djangos makemessages to pick up the strings from it as well. However, it seems that the strings are not parsed correctly, because most of the code in bundle.js is simply strings wrapped in eval().
I believe this means that I need webpack to - in addition to the bundle.js file - create a .js file for each .tsx file without all of the eval() nonsense, so that django's makemessages can parse it properly. I have no idea how to do this, however. My current config looks like this
var path = require("path");
var WebpackShellPlugin = require('webpack-shell-plugin');
var config = {
entry: ["./src/App.tsx"],
output: {
path: path.resolve(__dirname, "build"),
filename: "bundle.js"
},
devtool: 'source-map',
resolve: {
extensions: [".ts", ".tsx", ".js"]
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: "ts-loader",
exclude: /node_modules/
},
{
test: /\.scss$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "sass-loader" // compiles Sass to CSS
}]
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
}
]
},
plugins: [
new WebpackShellPlugin({
onBuildEnd:['./cp_to_static.sh'],
dev: false // Needed to trigger on npm run watch
})
]
};
module.exports = config;
So how can I make webpack spit out these files?
Is this the right thing to do, or is there a way to make Django parse bundle.js properly?
Turns out that all of the eval nonsense was generated by webpacks "watch" function. When simply running webpack for building the script, it works as expected

Changing assets outputPath doesn't update in html

I'm trying to change the outputPaths for my assets from the default assets to media so I can more easily integrate it with my php framework.
In my ember-cli-build.js file, I've made the following modifications to my app as defined here:
var app = new EmberApp(defaults, {
fingerprint : {
replaceExtensions : [ 'html', 'php', 'css', 'js' ]
},
outputPaths: {
app: {
css: {
'app': '/media/application-name.css'
},
js: '/media/application-name.js'
},
vendor: {
css: '/media/vendor.css',
js: '/media/vendor.js'
}
},
'ember-power-select': {
theme: 'bootstrap'
}
});
While the generated application-name.css, application-name.js, vendor.css and vendor.js files are saved on the hard drive in the correct assets directory, the index.html file is not updated to match. Instead, it links to the same default assets/application-name.*s[s] files.
Any ideas why this isn't working? Thanks.
For fingerprinting to work, the path and file names in your index.html file and in your config.js file have to match. For example, if you have the below in your config file:
outputPaths: {
app: {
css: {
'app': '/media/my-application.css'
},
js: '/media/my-application.js'
},
vendor: {
css: '/media/vendor.css',
js: '/media/vendor.js'
}
}
You'll need to edit your index.html file to match:
<link rel="stylesheet" href="media/my-application.css">
<script src="media/my-application.js"></script>

Adding the uri.js bower component breaks my Grunfile.js, which dies thinking the uri.js directory is a file. How to fix?

The Yeoman generated Gruntfile.js dies during a grunt build with:
Running "rev:dist" (rev) task
dist/public/app/app.js >> b90d2f58.app.js
dist/public/app/vendor.js >> 2deb5480.vendor.js
Warning: Unable to read "dist/public/bower_components/uri.js" file (Error code: EISDIR). Used --force, continuing.
Clearly it is interpreting the uri.js component directory as a file! One simple fix is to rename the uri.js component to uri_js or something similar. But rather than do that, is there an easy switch to add to the utility that does the Hashing to know that 'uri.js' is not a file??? I already tried adding "filter: 'isFile'" to every place in the Gruntfile that has *.js as a pattern, to no avail.
Anyone who has already seen this, your help is appreciated. For now I am simply doing grunt build --force. Thanks
I finally discovered that one can exclude this bower_component from the rename process. The key is that order of the files in the rev piece is dependent on the order of selection. So I modified this section of my Gruntfile.js ... and all is well.
// Renames files for browser caching purposes
rev: {
dist: {
files: {
src: [
'<%= yeoman.dist %>/public/{,*/}*.js',
'<%= yeoman.dist %>/public/{,*/}*.css',
'<%= yeoman.dist %>/public/assets/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
'<%= yeoman.dist %>/public/assets/fonts/*',
'!<%= yeoman.dist %>/public/bower_components/uri.js'
]
}
}
The crucial addition was this last piece:
'!<%= yeoman.dist %>/public/bower_components/uri.js'
I hope this helps someone else with with this issue!

Grunt JS file pattern in cwd

I am using grunt to build my project and have the following src structure:
app/src/client/pages/user/users.js
app/src/client/pages/user/users.html
app/src/client/pages/project/projects.js
app/src/client/pages/user/projects.html
Now, I am trying to build my project to look like this:
app/dist/client/users.html
I use the contrib-htmlmin plugin and my grunt config looks like this:
htmlmin: {
options: {
removeComments: true,
collapseWhitespace: true
},
partials: {
files: [
{
expand: true,
cwd: "app/src/client/pages/*/",
dest: "app/dist/client/",
src: ["*.html"]
}
]
}
But this is not working at all, no files are being minified.
Any suggestions?
As best I can tell, Grunt does not expand patterns in cwd, so your option
cwd: "app/src/client/pages/*/",
never gets converted to an array of matching directories.
You can follow my logic for this conclusion by starting at this line in the source. grunt.file.expandMapping (source here) doesn't call grunt.file.expand on your cwd pattern.
That doesn't mean you can't do it yourself. I've used the following pattern to accomplish something similar with grunt-contrib-sass when I have sass files spread out over several directories:
htmlmin: {
options: {
removeComments: true,
collapseWhitespace: true
},
partials: {
files: grunt.file.expand(['app/src/client/pages/*/']).map(function(cwd) {
return {
expand: true,
cwd: cwd,
dest: "app/dist/client/",
src: ["*.html"]
};
}),
}

Can not see useminPrepare results

Yeoman build task breaks my app out of the box and I am trying to see where is the problem.
So I commented out the other tasks and only left:
grunt.registerTask('build', [
'clean:dist',
'useminPrepare',
]);
And useminPrepre task is defined like this:
useminPrepare: {
html: '<%= yeoman.app %>/index.html',
options: {
dest: '<%= yeoman.dist %>',
flow: {
steps: {'js': ['concat']},
post: {}
}
}
},
The output (see below) seem Ok but the dist folder is empty, once the build is done. How can I make useminPrepare to actually write the files?
Running "useminPrepare:html" (useminPrepare) task
Going through C:/development/projects/yadazing/bb_ui/app/index.html to update the config
Looking for build script HTML comment blocks
Configuration is now:
concat:
{ generated:
{ files:
[ { dest: '<APP_PATH> \\dist\\scripts\\scripts.js',
src:
[ '{.tmp,app}\\bower_components\\jquery\\jquery.js',
<APP_COMPONENTS>\\angular.js'
.
.
] },
{ dest: ''<APP_PATH>\\dist\\scripts\\modules.js',
src:
[ '<APP_MUDULES>\\app\\scripts\\app.js',
'<APP_MUDULES>\\app\\scripts\\settings.js',
.
.
]}]}}
Done, without errors.
Execution Time (2014-02-19 22:46:34 UTC)
loading tasks 5ms
clean:dist 5ms
useminPrepare:html 26ms
Total 37ms
All that useminprepare does is modify the configuration of other grunt tasks. To see the result of the generated task configuration, you'll need to run those tasks afterwards.
That collection of tasks, and the order that they execute in, is called the flow. By default the flow is concat -> uglifyjs, but you can write your own flows.
Using the default flow you would need to execute:
grunt.registerTask( 'lala', ['useminprepare', 'concat', 'uglify'] );
to see the results.