Watch coffee files and only want to use filename as target - coffeescript

My folder structure
app/tool_1/js/myfile.coffee
app/tool_2/js/myfile2.coffee
...
I want to compile these files to one directory:
server/jsfolder/
Gruntfile.coffee
module.exports = ( grunt ) ->
grunt.initConfig
watch:
tools_coffee:
files: [ "app/**/*.coffee" ]
tasks: [ "newer:coffee:tools" ]
coffee:
tools:
expand: true
cwd: "app"
src: [ "**/*.coffee" ]
dest: "server/jsfolder"
ext: ".js"
Problem
The whole path will be copied to dest:
server/jsfolder/tool_1/js/myfile.js
The result I want is like:
server/jsfolder/myfile.js
Is there any solution for this?
I use grunt-newer and grunt-watch for this.

There is an function rename where the name can be overwritten.

To answer your question, I believe you want the flatten option, which will remove source paths from your dest directory.
rename, to answer your answer, is pretty cool too, and looks like this:
dest: 'foo/',
rename: function(dest, src) {
return dest + src.replace('foo', 'bar')
},
}

Related

How to correctly bundle a vscode extension using webpack

The problem that i am having is that when i run vsce package i still get the This extension consists of 3587 separate files. For performance reasons, you should bundle your extension: warning, i followed the Bundling Extension steps, debugging works as expected.
package.json
{
"main": "./out/extension",
"scripts": {
"vscode:prepublish": "webpack --mode production",
"webpack": "webpack --mode development",
"webpack-dev": "webpack --mode development --watch",
"compile": "npm run webpack",
"watch": "tsc -watch -p ./",
"postinstall": "node ./node_modules/vscode/bin/install"
},
}
The webpack config is an exact copy of the Bundling Extension example.
This sounds like you might've forgotten to add the source directories to .vscodeignore, so they're still being packaged into the release. The ignore file should probably contain at least the following, plus anything else not needed at runtime:
src/**
node_modules/**
If you are working with a Language Server extension which has both client and server folders, If you exclude the node_modules of the client and server from the bundle the extension would fail when installed and launch for the first time
.vscodeignore contains
.vscode
**/*.ts
**/*.map
out/**
node_modules/**
test_files/**
client/src/**
server/src/**
tsconfig.json
webpack.config.js
.gitignore
Also the documentation is a bit obsolete regarding the webpack.config.js, you have to wrap the 'use strict' into a function with all the settings.
The entry setting was changed according to my needs
//#ts-check
(function () {
'use strict';
const path = require('path');
/**#type {import('webpack').Configuration}*/
const config = {
target: 'node', // vscode extensions run in a Node.js-context 📖 -> https://webpack.js.org/configuration/node/
entry: './client/src/extension.ts', // the entry point of this extension, 📖 -> https://webpack.js.org/configuration/entry-context/
output: {
// the bundle is stored in the 'dist' folder (check package.json), 📖 -> https://webpack.js.org/configuration/output/
path: path.resolve(__dirname, 'dist'),
filename: 'extension.js',
clean: true, //clean the dist folder for each time webpack is run
libraryTarget: 'commonjs2',
devtoolModuleFilenameTemplate: '../[resource-path]'
},
devtool: 'source-map',
externals: {
vscode: 'commonjs vscode' // the vscode-module is created on-the-fly and must be excluded. Add other modules that cannot be webpack'ed, 📖 -> https://webpack.js.org/configuration/externals/
},
resolve: {
// support reading TypeScript and JavaScript files, 📖 -> https://github.com/TypeStrong/ts-loader
extensions: ['.ts', '.js']
},
module: {
rules: [
{
test: /\.ts$/,
exclude: /node_modules/,
use: [
{
loader: 'ts-loader'
}
]
}
]
}
};
module.exports = config;
}());

How to get bourbon-neat to work with Roots

So I'm experimenting with Roots Static Site generator and I'm having a hell of a time getting it to import Bourbon-neat through the app.coffee file.
My app.coffee looks like this:
js_pipeline = require 'js-pipeline'
css_pipeline = require 'css-pipeline'
browserify = require 'roots-browserify'
sass = require 'node-sass'
module.exports =
ignores: ['readme.md', '**/layout.*', '**/_*', '.gitignore', 'ship.*conf']
extensions: [
browserify(files: 'assets/js/main.coffee', out: 'js/build.js')
js_pipeline(files: 'assets/js/*.coffee'),
css_pipeline(files: 'assets/css/*.scss')
]
'coffee-script':
sourcemap: true
jade:
pretty: true
sass:
// includePaths: require('bourbon-neat').includePaths
// includePaths: [require('bourbon-neat').includePaths]
includePaths: ['node_modules/bourbon-neat/app/assets/stylesheets/']
The commented includePaths are other things I've tried. I've read the bourbon-neat docs that mentioned needing to pass require('bourbone-neat').includePaths but it doesn't seem to work.
The error I get when attempting to #import "neat" in my .scss file is:
Error: File to import not found or unreadable: neat.
Note: There doesn't seem to be a tag for root.
For anyone else looking, I was able to get this working. Here's my app.coffee:
js_pipeline = require 'js-pipeline'
css_pipeline = require 'css-pipeline'
browserify = require 'roots-browserify'
module.exports =
debug:true
ignores: ['readme.md', '**/layout.*', '**/_*', '.gitignore', 'ship.*conf']
extensions: [
browserify(files: 'assets/js/main.coffee', out: 'js/build.js')
js_pipeline(files: 'assets/js/*.coffee')
css_pipeline(files: 'assets/css/*.scss')
]
'coffee-script':
sourcemap: true
jade:
pretty: true
scss:
includePaths: require('bourbon-neat').includePaths

Karma preprocessor not running

My karma.conf.js includes:
plugins: [
'karma-jasmine',
'karma-phantomjs-launcher',
'karma-ng-html2js-preprocessor'
],
preprocessors: {
'../../mypath/*.html': ['ng-html2js']
},
ngHtml2JsPreprocessor: {
moduleName: 'templates'
},
(I've tried without specifying any plugins, too.)
My devDependencies include:
"karma-ng-html2js-preprocessor": "^0.2.0"`
My tests include:
beforeEach(module('templates'));
These give the error:
Module 'templates' is not available!
Running karma with --log-level debug, I do not see any [preprocessor.html2js] entries. (I do get Loading plugin karma-ng-html2js-preprocessor.)
What am I doing wrong?
The issues were that the templates must be listed under files as well, and that the glob pattern in preprocessors must match. This is implied by the documentation.
files: [
'../../Scripts/angular-app/directives/*.html',
// .js files
],
preprocessors: {
'../../Scripts/angular-app/**/*.html': ['ng-html2js']
},
Note that **/*.html does not match parent directories of the basePath.
karma start --log-level debug will display DEBUG [preprocessor.html2js] entries when everything is correct.
I was also able to remove the plugins section.
To get the correct cache ID, I used:
ngHtml2JsPreprocessor: {
// Load this module in your tests of directives that have a templateUrl.
moduleName: 'templates',
cacheIdFromPath: function (filepath) {
return filepath.substring(filepath.indexOf('/Scripts/angular-app/'));
}
},
If a template references a custom filter, the filter must be loaded in files and the filter's module must be loaded in your directive tests.

Grunt.js, Warning: Unable to write "src" file (Error code: EISDIR)

I have an Gruntfile written in CoffeeScript and I keep getting an (Error code: EISDIR) when the cssmin task is run. After running the task in verbose mode, I get this information:
Running "cssmin" task
Running "cssmin:src" (cssmin) task
Verifying property cssmin.src exists in config...OK
Files: assets/z.styles.concat.css.liquid -> src
Options: report=false
Reading assets/z.styles.concat.css.liquid...OK
Writing src...ERROR
Warning: Unable to write "src" file (Error code: EISDIR). Use --force to continue.
Here's my cssmin task:
cssmin:
src: 'assets/z.styles.concat.css.liquid'
dest: 'assets/styles.min.css.liquid'
The z.styles.concat.css.liquid is created after concat runs and is successfully outputted to the assets folder. The path listed in the src attribute is correct.
Any idea what could be throwing the error?
Also, here is the entire gruntfile for connivence.
Grunt.coffee:
module.exports = (grunt) ->
# Project configuration.
grunt.initConfig
pkg: grunt.file.readJSON 'package.json'
files:
grunt: ['gruntfile.js']
css: ['assets/screen.css', 'assets/styles.css.liquid']
scss: ['src/scss/**/*.scss']
js: ['src/js/**/*.js'] #(if we need liquid templating), 'src/js/**/*.js.liquid', 'assets/**/*.js.liquid']
coffee: ['src/js/coffee/**/*.coffee', 'src/js/coffee/**/*.coffee.liquid']
img: ['src/images/**/*.{png,jpeg,svg,jpg,gif}']
# Image Processing
smushit:
path:
src: '<%= files.img %>' #recursively replace minified images
dest: 'assets'
# Concatenation Processing
concat:
css:
src: ['<%= files.css %>']
dest: 'assets/z.styles.concat.css.liquid'
js:
src: ['<%= files.js %>']
dest: 'src/js/z.scripts.concat.js'
# JavaScript Processing
coffee:
app:
expand: true
cwd: 'src/js/coffee'
src: ['**/*.coffee', '**/*.coffee.liquid']
dest: 'src/js'
ext: '.js'
uglify:
dist:
src: ['src/js/z.scripts.concat.js']
dest: 'assets/scripts.min.js'
jshint:
files: ['<%= files.grunt %>', 'src/js/z.scripts.concat.js']
options:
jquery: true
smarttabs: true
curly: true
eqeqeq: true
immed: true
latedef: true
newcap: true
noarg: true
sub: true
undef: true
boss: true
eqnull: true
browser: true
globals:
jQuery: true
console: true
undef: true
unused: false
# CSS Processing
compass:
dist:
options:
sassDir: 'src/scss'
cssDir: 'assets'
imagesDir: 'assets',
javascriptsDir: 'assets',
outputStyle: 'expanded'
cssmin:
src: 'assets/z.styles.concat.css.liquid'
dest: 'assets/styles.min.css.liquid'
# watch tasks
watch:
options:
nospawn: true
events: ['changed', 'added']
files: [
'<%= files.js %>'
'<%= files.coffee %>'
'<%= files.scss %>'
]
tasks: ['default']
# These plugins provide necessary tasks.
grunt.loadNpmTasks 'grunt-contrib-coffee'
grunt.loadNpmTasks 'grunt-contrib-watch'
grunt.loadNpmTasks 'grunt-contrib-concat'
grunt.loadNpmTasks 'grunt-contrib-jshint'
grunt.loadNpmTasks 'grunt-contrib-uglify'
grunt.loadNpmTasks 'grunt-contrib-cssmin'
grunt.loadNpmTasks 'grunt-smushit'
grunt.loadNpmTasks 'grunt-contrib-compass'
# Default task.
grunt.registerTask 'default', [
'coffee'
'concat:js'
'jshint'
'uglify'
'concat:css',
'cssmin'
]
# Minify task
# Run the default task then losslessly minify images with Yahoo!'s Smush-It
grunt.registerTask 'minify', ['default', 'smushit']
In your output Grunt's trying to run the cssmin:src task and then it tries writing to the source file. This can't be the desired result?
You need to specify a name for the cssmin task because it's a multitask. See the Grunt documentation for additional information.
Change your grunt config to
cssmin:
minify:
src: 'assets/z.styles.concat.css.liquid'
dest: 'assets/styles.min.css.liquid'
Using NodeJS 4.2.2 and Grunt 0.4.5,
I had EISDIR write error when compiled filename was named same as an existing directory. They were both in the same hierarchy level. Renaming solved the problem.
It seems, src points to directory. Try to add /** to the endof path.
assets/z.styles.concat.css.liquid/**

Grunt JS copy to network location

I want to use grunt-contrib-copy (or any other grunt copying plugin) to copy files to network location.
Trying below:
copy: {
test: {
files: [
{ src: ['Scripts/*'], dest: ['\\\\location\\site\\Scripts\'] }
]
}
}
but getting:
Warning: Unable to write "\\location\site\Scripts\" file (Err
or code: undefined). Use --force to continue.
Is it possible / How to copy to network location?
Yes, it's quite simple to do, just define your path with forward slashes:
copy: {
test: {
files: [
{ src: ['Scripts/*'], dest: ['//location/site/Scripts/'] }
]
}
}
This will work on windows as-well, grunt will take care of that. Try it out.
to copy files from mac to windows shared directory prepend the destination with smb:
copy: {
test: {
files: [
{ src: ['Scripts/*'], dest: ['smb://location/site/Scripts/'] }
]
}
}
kr,
Joachim