In my app (Asp.net mvc) I have the following folder structure:
Scripts folder contains all .js and .coffee files. Inside the folder Controllers I have a folder for each controller.
I need that whenever a .coffee file changed, a new file .js is created in the same folder with the same name.
module.exports = (grunt) ->
# Configurações
grunt.initConfig
coffee:
compile:
options:
basePath: 'Scripts'
preserve_dirs: true
files: 'Scripts/*.js': 'Scripts/**/*.coffee'
# Plugins
grunt.loadNpmTasks 'grunt-contrib-coffee'
When I run grunt: grunt coffee the following error occurs:
Unable to write "Scripts/*.js" file (Error code: ENOENT). Use --force to continue
use it that way:
coffee:
compile:
files: [
expand: true
cwd: "./Scripts"
src: ["**/*.coffee"]
dest: "./Scripts"
ext: ".js"
]
read more about it here: http://gruntjs.com/configuring-tasks#building-the-files-object-dynamically
Related
Babel doesn't find all of my .js/.es6 files in my directory.
I have this directory structure:
src/
assets/
sample/
models.es6
scripts/
playground.es6
If I run babel src --out-dir dist --source-maps --copy-files --presets env, it only transpiles /src/assets/sample/models.es6 and doesnt go through src/scripts/playground.es6.
What am I doing wrong?
Looking forward to your response!
You can do like below :
babel src/** --out-dir lib
more at official doc
Compile Directories
Compile the entire src directory and output it to the lib directory. You may use --out-dir or -d. This doesn’t overwrite any other files or directories in lib.
if you still stuck, you can use gulp or grunt or webpack to load/transpile mupltiple directives from different locations.
Hope it helps
I found the problem. It has barely to do with Babel.
Inside the src/assets/** is my Realm database sample.realm (https://realm.io). The file itself doesnt cause the problem. But if you open the sample.realm file with Realm Studio on MacOSX, a file called sample.realm.note gets created. This file causes babel to not exit the transpile task.
I'm having trouble using webpack instead of Codekit v1.9.3. I started working to move from CodeKit to Grunt and Gulp, and then learned about webpack which sounds very cool. I just can't seem to get it working correctly.
"Like Codekit" means I can:
Write javascript with the coffeescript syntax
Have all script source files and libraries minified / uglified and combined into one file
Selectively include components of the bootstrap-sass (scss) framework as needed
Maintain a small file with bootstrap customizations via sass variables, like $brand-primary
Use webpack --watch to compile both scripts and styles automatically when they are changed
End up with one css file and one script file that can be included with a stylesheet and script tag.
Codekit Project Setup
Bower resources:
I'm currently storing these globally, outside of the project:
~/bower_components/twbs-bootstrap-sass/vendor/assets/stylesheets
Because CodeKit supports compass, I've got this in my config.rb file:
add_import_path "~/bower_components/twbs-bootstrap-sass/vendor/assets/stylesheets"
Project Structure
js/fancybox.js
js/main.js <-- currently the compiled js 'output' file
js/main.coffee
css/styles.css <-- currently the compiled css 'output' file
scss/styles.scss
scss/modules/_bootstrap-customizations.scss
scss/modules/_typography.scss
scss/partials/_header.scss
scss/partials/_footer.scss
Contents of styles.scss
#import "modules/bootstrap-customizations"; # local customizations
#import "bootstrap/variables";
#import "bootstrap/mixins";
... # load bootstrap files as required
#import "bootstrap/wells";
System Setup:
system: OS X 10.9
node - v0.10.32
npm - v2.1.7
zsh - zsh 5.0.7 (x86_64-apple-darwin13.4.0)
node was installed with homebrew's brew install node and seems to be working fine otherwise.
What I've Tried
I've read over these pages:
http://webpack.github.io/docs/configuration.html
https://github.com/petehunt/webpack-howto
http://webpack.github.io/docs/tutorials/getting-started/
https://www.npmjs.org/package/bootstrap-sass-webpack
I've attempted to create a webpack.config.js file several times, my latest attempt was several versions of this:
module.exports = {
entry: [
"./node_modules/bootstrap-sass-webpack!./bootstrap-sass.config.js",
"./js/main.coffee"
],
output: {
path: __dirname,
filename: "main.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" }
]
}
};
Webpack Error
When I run webpack I get this:
ERROR in ./~/bootstrap-sass-webpack/~/css-loader!/Users/cwd/~/sass-loader!./~/bootstrap-sass-webpack/bootstrap-sass-styles.loader.js!./bootstrap-sass.config.js
stdin:1: file to import not found or unreadable: "~bootstrap-sass/assets/stylesheets/bootstrap/variables
NPM Error
I get an error when attempting to npm install bootstrap-sass, and not had any luck when searching for a solution. I'm not even sure I need this module.
npm ERR! Darwin 13.4.0
npm ERR! argv "node" "/usr/local/bin/npm" "install" "bootstrap-sass"
npm ERR! node v0.10.32
npm ERR! npm v2.1.7
npm ERR! code EPEERINVALID
npm ERR! peerinvalid The package bootstrap-sass does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer bootstrap-sass-webpack#0.0.3 wants bootstrap-sass#~3.2.0
npm ERR! Please include the following file with any support request:
npm ERR! /Users/cwd/webpack-test/npm-debug.log
Sources of Confusion
The most confusing parts of webpack for me are:
Where should things like require("bootstrap-sass-webpack") be added - is it in the webpack.config.js file, or in the js/main.js file?
Should modules like this available to webpack as soon as they are installed with npm install ?
I thought that I should do npm install webpack -g so that webpack was installed globally, and use npm install without the -g for the other modules. However, I don't see any node_modules folder being created in my project. Shouldn't there be one?
How are the search paths determined / specified for things like require("bootstrap-sass-webpack") ?
What node modules should I install to be able to do this? And what should my webpack.config.js look like?
Introduction
Webpack is mainly a JavaScript-bundler. Its "native" language is JavaScript and every other source requires a loader which transforms it to JavaScript. If you require() an html-file for example...
var template = require("./some-template.html");
...you'll need the html-loader. It turns...
<div>
<img src="./assets/img.png">
</div>
...into...
module.exports = "<div>\n <img src=\"" + require("./assets/img.png") + "\">\n</div>";
If a loader doesn't return JavaScript, it needs to be "piped" to another loader.
How to load SASS-files
Configure loaders
In order to use SASS you'll need at least the sass-loader and the css-loader. The css-loader returns a JavaScript string. If you want to import the returned JavaScript string as StyleSheet, you'll also need the style-loader.
Run npm i sass-loader css-loader style-loader --save
Now you need to apply these loaders on all files that match /\.scss$/:
// webpack.config.js
...
module: {
loaders: [
// the loaders will be applied from right to left
{ test: /\.scss$/, loader: "style!css!sass" }
]
}
...
You can also pass options to node-sass as query parameters:
{
test: /\.scss$/, loader: "style!css!sass?includePaths[]=" +
path.resolve(__dirname, "./bower_components/bootstrap-sass/assets/stylesheets/"
}
Since bootstrap references icons via the url() statement, the css-loader will try to include these assets into the bundle and will throw an exception otherwise. That's why you'll also need the file-loader:
// webpack.config.js
...
module: {
loaders: [
{ test: /\.scss$/, loader: "style!css!sass" },
{ test: /\.jpe?g$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$/, loader: "file" },
]
}
...
Configure entry
To include bootstrap into your bundle there are several ways. One is via the multi-entry option as you've already tried. I recommend to use a single entry where you require() your main sass-file:
// main.js
require("./main.scss");
Given that your includePaths are configured then you can do:
// main.scss
// Set the font path so that url() points to the actual file
$icon-font-path: "../../../fonts/bootstrap";
#import "bootstrap";
Please note that import statements inside scss-files are not touched by webpack because libsass has no api (yet) to provide custom resolvers.
To prevent code duplication it's also important to have a single main sass-file, because webpack compiles every sass-file individually.
With the coffee-loader installed via npm your final webpack.config.js should look like:
module.exports = {
entry: "./js/main.coffee",
output: {
path: __dirname,
filename: "main.js"
},
module: {
loaders: [
{ test: /\.scss$/, loader: "style!css!sass" },
{ test: /\.jpe?g$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$/, loader: "file" },
{ test: /\.coffee$/, loader: "coffee" }
]
}
};
Webpack globally?
It's best not to install webpack globally, because it's a dependency of your project and thus should be controlled via npm. You can use the scripts-section of your package.json:
{
...
"scripts": {
"start": "webpack --config path/to/webpack.config.js & node server.js"
}
}
Then you just need to run npm start
I though I read somewhere that the "main" property of package.json could be used to copy just the files needed for "dist" or deployment. I supposed there was a grunt task for it, but I don't see anything that would help me or instruct me. I now copy everything under node_modules, but I certainly don't need to distribute library sample code, for example.
Is there a grunt task or any instructions on how to properly use grunt-contrib-copy to just copy the files from a node_module dependency hopefully from the config object's standard pkg object (a parsed package.json file)?
package.json doesn't contain enough information for you to know what to include. You would have to parse out all the require statements, but even then there are cases you can't detect, like a module loading resources, etc.
The right way to do this is for package authors to ignore the files that isn't needed using a .npmignore file or even better, use the files property in package.json to explicitly define what files should be included in the package.
Unfortunately though, most package authors are lazy and don't bother with any of this...
I would encourage you to open PRs on the modules in question with the files property.
You can:
1) Use copy task to copy each relevant file to dest directory:
copy:
js:
files: [
{
expand: true,
cwd: 'node_modules/jquery',
src: 'jquery.min.js',
dest: 'www/js'
},
{
expand: true,
cwd: 'node_modules/jquery-mobile-bower/js',
src: 'jquery.mobile-*.min.js',
dest: 'www/js'
}
]
jquery.min.js and jquery.mobile-x.y.z.min.js will be both copied to www/js directory.
2) Use concat task to concat all files to a single dest file (usefull to generate unique javascript / stylesheets files)
concat:
options:
separator: ';'
js:
dest: 'www/js/lib.js'
src: [
'node_modules/jquery/jquery.min.js',
'node_modules/jquery-mobile-bower/js/jquery.mobile-*.min.js'
]
jquery.min.js and jquery.mobile-x.y.z.min.js will be merged into a single www/js/lib.js file, separated by a semicolon.
Just getting started with Coffeescript and have installed it correctly , however having problems getting basic compilation to work
I have 2 folders names 'src' and 'js'
I create a simple .coffee file in the src folder called test.coffee
In the parent folder I open a terminal window and type the following
coffee -wc src -o js
This SHOULD automatically compile any .coffee files in the src folder and put in the js folder but I always get an error
File not found: –wc.coffee
What am I doing wrong?
Coffee is picky about parameter order.
Usage: coffee [options] path/to/script.coffee -- [args]
As you see, you have to specify all options before the script (or directory) you want to compile:
coffee -w -c -o js src
or
coffee -wco js src
According to the usage examples on coffeescript.org, the "watch" functionality is for files, not directories.
Try dropping the -w.
I have installed nodejs, installed coffee using npm and registered the environment variables and am now ready to compile my CoffeeScript into JavaScript for the first time.
I am running the following command in c:\MyCoffeeScriptProject\
coffee --compile --output js/
What happens next is that I get the interactive window and nothing in the "js" folder.
coffee>
I was expecting all .coffee files to be compiled into the "js" folder as .js files.
You didn't tell it which files to compile.
Usage: coffee [options] path/to/script.coffee [args]
Append a single period to the end for the current directory.
coffee --compile --output js/ .
It's easier to read if you rearrange it though.
coffee --output js/ --compile .
compiles all coffee files in . to js/
A common usage pattern is to have a src folder.
coffee --output js/ --compile src/
c:/parent>coffee --output output --compile src
Where "output" is blank folder and "src" folder contains coffee files.
Execute the command at level of src.