The command I'm using is
browserify -t browserify-css src\app.js > bundle.js
And css files that are traversed end up as text blobs in the bundle.js files which ultimately get appended as style tags to the head when loaded in a browser.
Is it be possible to output both a bundle.js and bundle.css file, where the bundle.css is just the concatenation of all css files that were traversed?
The src\app.js in this example contains only one require
require( 'app.css' );
You can use the sheetify transform, which outputs code that uses insert-css. Then, use the css-extract browserify plugin to extract the insert-css calls into a separate file.
browserify -t sheetify/transform -p [ css-extract -o bundle.css ] index.js \
-o bundle.js
Related
I have following setup under my project:
/assets/scss has many SCSS files organized under different subdirectories; including a root global.scss file. As you can imagine, global.scss will only have #imports.
/assets/css is set as output directory. I am trying to output only one file under this folder - global.css.
package.json has this command
"scripts": {
"scss": "node-sass --watch assets/scss/styleguide.scss -o assets/css --recursive"
}
When I run npm run scss it outputs subdirectory CSS files as well. Does anyone know how to avoid output of subdirectory sass files?
Thanks in advance!
You are passing the --recursive argument to node-sass. That will mean that node-sass will search recursively on every directory under assets/scss and will compile all the scss files found. To avoid that behavior just remove the --recursive option:
"scripts": {
"scss": "node-sass --watch assets/scss/styleguide.scss -o assets/css"
}
More about node-sass usages and options can be found here.
Simple one, but could not find the answer anywhere online! Installed sass globally (npm install -g sass) on my Mac.
This works as expected:
sass style.scss style.css
Then I try:
sass --watch style.scss:style.css
And get:
Could not find an option named "watch".
Usage: sass <input> [output]
--[no-]stdin Read the stylesheet from stdin.
--[no-]indented Use the indented syntax for input from stdin.
-I, --load-path=<PATH> A path to use when resolving imports.
May be passed multiple times.
-s, --style=<NAME> Output style.
[expanded (default), compressed]
-c, --[no-]color Whether to emit terminal colors.
-q, --[no-]quiet Don't print warnings.
--[no-]trace Print full Dart stack traces for exceptions.
-h, --help Print this usage information.
--version Print the version of Dart Sass.
What am I missing??
Thanks!!
First create the SASS's folder, and in there create your SASS's file. Example:
sass/styles.sass
In your project root folder, open the console and type the command:
sass --watch sass/styles.sass:css/styles.css
This command will create your CSS's folder and CSS's file. In addition to compiling your .sass content for your .css.
In the end, I gave up on sass as tried above, and went for a solution with webpack.
Another option I tried which worked was to use node-sass.
I solved running this command on your terminal
echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
i hope that help
I've run browserify like this:
browserify js/app.js -d | exorcist js/bundle.js.map > js/bundle.js
When I load this in Chrome, the sources map file is fine. When I uglify it like this:
uglifyjs js/bundle.js --in-source-map js/bundle.js.map --source-map-url bundle2.js.map --source-map js/bundle2.js.map -o js/bundle2.js -p 1
The sources map file does not work. It tries to load sources from /js/js, instead of just from /js. I have fiddled with the -p parameter, and every other parameter that is documented on the commandline here:
https://github.com/mishoo/UglifyJS2
The only way I could get this to work was to cd into the js directory and run the commands from there. Lame, but it works.
-p relative
fixed the issue for me
I am trying to exclude JQuery from my build file:
browserify --exclude jquery -g uglifyify -e src/main.js -t partialify -t uglifyify > dist/bundle.min.js
Only JQuery is still in the bundle.min.js? Am I doing something wrong?
https://github.com/substack/browserify-handbook#ignoring-and-excluding
Have you tried the following?
browserify src/main.js --exclude jquery -g uglifyify -t partialify -t uglifyify > dist/bundle.min.js
the usage is as follows, i.e. options come after entry files:
Usage: browserify [entry files] {OPTIONS}
is there a way to set a output-directory for making kernel-modules inside my makefile?
I want to keep my source-direcory clean from the build-files.
KBUILD_OUTPUT and O= did not work for me and were failing to find the kernel headers when building externally.
My solution is to symlink the source files into the bin directory, and dynamically generate a new MakeFile in the bin directory. This allows all build files to be cleaned up easily since the dynamic Makefile can always just be recreated.
INCLUDE=include
SOURCE=src
TARGET=mymodule
OUTPUT=bin
EXPORT=package
SOURCES=$(wildcard $(SOURCE)/*.c)
# Depends on bin/include bin/*.c and bin/Makefile
all: $(OUTPUT)/$(INCLUDE) $(subst $(SOURCE),$(OUTPUT),$(SOURCES)) $(OUTPUT)/Makefile
make -C /lib/modules/$(shell uname -r)/build M=$(PWD)/$(OUTPUT) modules
# Create a symlink from src to bin
$(OUTPUT)/%: $(SOURCE)/%
ln -s ../$< $#
# Generate a Makefile with the needed obj-m and mymodule-objs set
$(OUTPUT)/Makefile:
echo "obj-m += $(TARGET).o\n$(TARGET)-objs := $(subst $(TARGET).o,, $(subst .c,.o,$(subst $(SOURCE)/,,$(SOURCES))))" > $#
clean:
rm -rf $(OUTPUT)
mkdir $(OUTPUT)
If you are building inside the kernel tree you can use the O variable:
make O=/path/to/mydir
If you are compiling outside the kernel tree (module, or any other kind of program) you need to change your Makefile to output in a different directory. Here a little example of a Makefile rule which output in the MY_DIR directory:
$(MY_DIR)/test: test.c
gcc -o $# $<
and then write:
$ make MY_DIR=/path/to/build/directory
The same here, but I used a workaround that worked for me:
Create a sub-directory with/for every arch name (e.g. "debug_64").
Under "debug_64": create symbolic link of all .c and .h files. Keeping the same structure.
Copy the makefile to "debug_64" and set the right flags for 64 Debug build, e.g.
ccflags-y := -DCRONO_DEBUG_ENABLED
ccflags-y += -I$(src)/../../../lib/include
KBUILD_AFLAGS += -march=x86_64
Remember to set the relative directories paths to one level down, e.g. ../inc will be ../../inc.
Repeat the same for every arch/profile.
Now we have one source code, different folders, and different make files.
By the way, creating profiles inside make files for kernel module build is not an easy job, so, I preferred to create a copy of makefile for every arch.