I'm setting up a Gruntfile in which I'm trying to:
Compile some coffeescript to javascript for client side.
Watch for changes to the coffeescript that is to be compiled to javascript for clientside.
Watch for changes to the backend (server) coffeescript files and restart the coffee app when changes are found.
I've got the first two steps working using this:
module.exports = (grunt) ->
grunt.initConfig
pkg: grunt.file.readJSON 'package.json'
coffee:
compile:
expand: true
flatten: true
cwd: 'public/src'
src: ['*.coffee']
dest: 'public/dist'
ext: '.js'
watch:
coffee:
files: ['public/src/*.coffee']
tasks: ['coffee']
grunt.loadNpmTasks 'grunt-contrib-coffee'
grunt.loadNpmTasks 'grunt-contrib-watch'
grunt.registerTask 'default', ['coffee', 'watch']
But I'm not sure how to do the third step.
The directory structure currently looks like this:
app
lib.coffee
routes.coffee
public/
dist/
client.js
src/
client.coffee
Gruntfile.coffee
package.json
server.coffee
How would I watch for changes to anything within the app directory or to the server.coffee file and start the server (e.g. 'coffee server.coffee') automatically with grunt?
Also the server uses express - would restarting the app need to watch to see if the port was available again before being started?
Managed to get this working in the end:
module.exports = (grunt) ->
grunt.initConfig
pkg: grunt.file.readJSON 'package.json'
coffee:
compile:
expand: true
flatten: true
cwd: 'public/src'
src: ['*.coffee']
dest: 'public/dist'
ext: '.js'
watch:
coffee:
files: ['public/src/*.coffee']
tasks: ['coffee']
express:
files: ['server.coffee']
tasks: ['express:dev']
options:
spawn: false
express:
dev:
options:
script: 'server.coffee'
opts: ['/path/to/coffee']
#port: 8080
grunt.loadNpmTasks 'grunt-contrib-coffee'
grunt.loadNpmTasks 'grunt-contrib-watch'
grunt.loadNpmTasks 'grunt-express-server'
grunt.registerTask 'default', ['coffee', 'express:dev', 'watch']
Related
I am running karma tests using following Angular script but I get error karma start ./karma.conf.js ERROR [config]: Error in config file! Unexpected token =]
The file runs fine on my windows local machine but gives error when I put it on Bitbucket and run it using Circle CI (continuous Integration)
I do notice that when I change karma.conf.js and put it on bitbucket, I get following warning
C:\Users\Manu\Documents\manu\programs\web\angular\dw-ng2-app>git add --all
warning: LF will be replaced by CRLF in karma.conf.js.
The file will have its original line endings in your working directory.
Karma file is
// Karma configuration file, see link for more information
// https://karma-runner.github.io/0.13/config/configuration-file.html
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '#angular/cli'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('#angular/cli/plugins/karma')
],
client:{
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
reports: [ 'html', 'lcovonly' ],
fixWebpackSourcePaths: true
},
angularCli: {
environment: 'dev'
},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
});
};
the problem seemed to be in the config file I created for CircleCI. See npm install fails in circle ci (angular cli project)
I am just starting to set up some tests with Karma. I some tests working with jdDom, but did not like how it was configuring. However, I am not sure how to point to the js files correctly. As I am getting this error
Error: [$injector:modulerr] Failed to instantiate module ha.module.utility due to:
Error: [$injector:nomod] Module 'ha.module.utility' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
I started a file with jsdom that required the core modules
require('../../../src/modules/core/module.core.built.js');
require('../../../src/modules/utility/module.utility.built.js');
These scripts are where my modules reside. I am not sure where to put them in the karma file. Or if this is even the issue . Here is my karma file below. I removed the comments that come with karma init so it could be quicker to read on this post.
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: 'Scripts/',
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: [
'jquery /jquery libraries ',
'../node_modules/angular/angular.js',
'../node_modules/angular-mocks/angular-mocks.js',
'test2/*.js',
'tests/**/*.js'
],
exclude: [
'tests/old/**',
'tests/**/*.setup.js'
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
'../Templates/**/*.html' : ['ng-html2js']
},
ngHtml2JsPreprocessor: {
// setting this option will create only a single module that contains templates
// from all the files, so you can load them all with angular.mock.module('foo')
//stripPrefix: "Templates/",
//prependPrefix: "Templates/",
moduleName: 'templates'
},
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: true,
concurrency: Infinity
Basically I need these tests to find the modules.
Your modules' directives, controllers, and all other required files should be uploaded into your list of "files," like this:
files: [
'../node_modules/angular/angular.js',
'../node_modules/angular-mocks/angular-mocks.js',
'../../../src/modules/core/module.core.built.js',
'../../../src/modules/utility/module.utility.built.js',
'test2/*.js',
'tests/**/*.js'
],
I have a Gruntfile, which takes all *.coffee files from a certain folder, and compiles them to JS files, keeping the same folder structure (if any).
So with a folder structure like:
scripts
|--widgets
| |--a.coffee
|--vendor
| |--b.coffee
|--c.coffee
|--d.coffee
It will generate the same folder structure, but with JS files instead of Coffeescript files. I would like to have a separate rule for the widgets folder and the c.coffee file, ie. I want to compile all of the contents of widgets and c.coffee into one single file.
How can I exclude one file and one folder from the files property of the grunt object? This is the code I'm currently running:
files: [{
expand: true,
cwd: '<%= params.app %>/scripts',
src: '{,*/}*.{coffee,litcoffee,coffee.md}',
dest: '.tmp/scripts',
ext: '.js'
}]
I've also seen that there are 2 syntaxes to declare files. One is as an object, and one as an array (what I have above). What is the difference and would the other declaration better help me in my case?
The documentation on configuring grunt tasks has some words on what you want. Actually, there are four ways to define a files property, of which one is deprecated.
Here is a Gruntfile.coffee, because it is shorter. Use the File Arrays Format with exclusion patterns for the compile subtask and the Compact Format for the compileJoined subtask. I hope you use grunt-contrib-coffee. grunt-coffee is out of maintenance for almost two years now and doesn't seem to have a join option.
module.exports = (grunt) ->
grunt.initConfig
params: app: '.' # ignore this, it's just that this file works as expected.
coffee:
compile:
files: [
cwd: '<%= params.app %>/scripts'
expand: yes
src: ['**/*.{coffee,litcoffee,coffee.md}' # everything coffee in the scripts dir
'!c.coffee' # exclude this
'!widgets/**/*'] # and these
dest: '.tmp/scripts'
ext: '.js'
extDot: 'first' # to make .js files from .coffee.md files
]
compileJoined:
options: join: yes
# sadly you can't use expand here, so you'll have to do cwd "by hand".
src: [
'<%= params.app %>/scripts/c.coffee'
'<%= params.app %>/scripts/widgets/**/*.{coffee,litcoffee,coffee.md}'
]
dest: '.tmp/special.js'
grunt.loadNpmTasks 'grunt-contrib-coffee'
here's a small output from script, it seems to work:
$ tree scripts
scripts
├── c.coffee
├── d.coffee
├── vendor
│ └── b.coffee
└── widgets
└── a.coffee
2 directories, 4 files
$ rm -rf .tmp
$ grunt coffee
Running "coffee:compile" (coffee) task
>> 2 files created.
Running "coffee:compileJoined" (coffee) task
>> 1 files created.
Done, without errors.
$ tree .tmp
.tmp
├── scripts
│ ├── d.js
│ └── vendor
│ └── b.js
└── special.js
2 directories, 3 files
$ cat scrips/c.coffee
variableInC_coffee = "a variable"
$ cat scripts/widgets/a.coffee
variableInC_coffee = variableInC_coffee.replace /\s+/, '_'
$ cat .tmp/special.js
(function() {
var variableInC_coffee;
variableInC_coffee = "a variable";
variableInC_coffee = variableInC_coffee.replace(/\s+/, '_');
}).call(this);
I'm using Imagemin with Grunt, and have the following task setup in Gruntfile.js
imagemin: {
options: {
optimizationLevel: 5,
progressive: true,
},
dev: {
files: [{
expand: true,
cwd: 'src/img/',
src: ['**/*.{png,jpg,gif}'],
dest: 'app/minimg/'
}]
}
},
It looks like it is working because if I run "grunt imagemin", the output files is saved in the dest folder - and I get this message:
Running "imagemin:dev" (imagemin) task
Minified 13 images (saved 0 B)
But, why is the images not compressed ("saved 0 B") ? I have tried with a lot of different files both png and jpg. And it is always 0 B.
// Magnus
Please try the latest version 'grunt-contrib-imagemin' .
It Worked for me :)
//uninstalled the package. add -g flag if you've installed it globally.
npm uninstall grunt-contrib-imagemin --save-dev
//install again
npm install grunt-contrib-imagemin --save-dev
After setting up the folder structure for my Gulp project, I was wondering how to do paths in browserify, and found this page: https://github.com/substack/browserify-handbook#organizing-modules. It recommends putting common application parts in a subfolder of node_modules. This appears to be working, it's getting the files, but it's not applying my coffeeify transform, so it's throwing errors because it's trying to interpret them as JS. Any ideas how to fix this? This is my browserify config:
browserify: {
// Enable source maps
debug: true,
// Additional file extentions to make optional
extensions: ['.coffee', '.hbs'],
// A separate bundle will be generated for each
// bundle config in the list below
bundleConfigs: [{
entries: src + '/javascript/app.coffee',
dest: dest,
outputName: 'app.js'
}, {
entries: src + '/javascript/head.coffee',
dest: dest,
outputName: 'head.js'
}]
}
and these are the relevant bits form my package.json.
"browserify": {
"transform": [
"coffeeify",
"hbsfy"
]
}
Transfroms aren't applied to files in node_modules unless they are marked as being global: https://github.com/substack/node-browserify#btransformtr-opts. If you choose to make it global, be warned, the documentation suggests against it:
Use global transforms cautiously and sparingly, since most of the time
an ordinary transform will suffice.
You won't be able to specify the tranform in package.json:
You can also not configure global transforms in a package.json like
you can with ordinary transforms.
The two options are programmatically, by passing {global: true} as options or at the command line with the -g option:
browserify -g coffeeify main.coffee > bundle.js