I have packages SASS and SCSS installed. SCSS provides the syntax highlight while SASS provides the build system i need for scss. My problem is, if build is set to automatic, it wont build the scss files if i press ctrl+b, so i have to always go back and reselect that option. Is there a way to make that build system to be the automatic one for scss?
Set it up using a build system and fire off with F7:
http://readthedocs.org/docs/sublime-text-unofficial-documentation/en/latest/file_processing/build_systems.html?highlight=build for more information about setting that up.
UPDATED ANSWER
Copy the following:
{
"cmd": ["sass", "--update", "$file:${file_path}/${file_base_name}.css", "--stop-on-error", "--no-cache"],
"selector": "source.sass, source.scss",
"line_regex": "Line ([0-9]+):",
"osx":
{
"path": "/usr/local/bin:$PATH"
},
"windows":
{
"shell": "true"
}
}
In Sublime Text, go Tools > Build System > New Build System > Paste
Give it a name. Bingo.
Simpler Way
SASS Support in Sublime
Adding Support for near everything.
Simplest Way
Why DIY when you do not need to.
Want to have the site update in an open browser every time you save?
Generally a good must to have Ruby Git and Python installed.
Install Nodejs.
(win) the .msi download from main site works well and includes npm
Now you have access to the 'gem' and 'npm' package managers.
Things get easy now, although I may as well write it out longwinded.
Compass:
gem update --system
gem install compass
// can now use this command to build a sass-based project
compass create myFirstWebsite
// ..installs in "/myFirstWebsite"..
Install the Grunt client (global flag)
npm install grunt-cli -g
now have access to the wealth of Grunt automation packages ie:
npm grunt-contrib-jshint --save-dev
"dev" flagged - applies to your local project only (current and sub folders)
also, listed as a "devDependency" in package.json, which means it'll not be
packed with your project on a distro/prod build
Time for some simple awesome... Yeoman
npm install yo -g
installs yeoman (yo commands) a heap of other essentials
and Bower - twitter's response to Node / Gem etc
Bower looks after package dependencies.
AND THE AWESOME?
// make a new folder. cd into it, and type:
yo webapp
// There are multiple 'generators' you can install with yo.
// webapp is the one most suitable for front-end dev / web app building
// other things you might want before you start.. maybe underscore:
bower install underscore
// adds '_' to the set-up as a dependency
// These commands will brighten your day:
grunt test
// comprehensive testing of app
grunt server
// This part you'll love! Starts server and launches app in browser
// - includes live-refreshing... save a file, and all required builds etc
// are preformed (damn fast) and automatically refreshes browser.
// Yup, 'grunt server' = project-wide equiv to 'compass watch'
grunt
// Build application for deploy. Not only do you get minification and concatenation;
// also optimize all your image files, HTML, compile your CoffeeScript and Compass files,
// if you're using AMD, will pass those modules through r.js so you don't have to.
Related
I'm using flask-assets and none of the available filters (rjsmin, jsmin, closure_js, uglifyjs, etc.) is able to minify a ES2016 JavaScript file. The minified files yield errors on the browser console (due to bad conversions) or even crash on execution before serving the resources.
Also, I have tried Babel filter from webassets and I it doesn't make any change on the files, they are just served without changes.
I also can't manage to enforce the closure or babel extra_args to customise their operation.
Any tip or recommendation?
Example code:
from flask_assets import Bundle
page_js = Bundle(
'js/code_with_es2016.js',
filters='rjsmin',
output='public/js/code.min.js'
)
You will need to use the babel filter with babel-presets-env. The webassets documentation is a bit behind on the recent developments which is no surprise considering how fast things are moving in the javascript world.
So first you will need to install babel-cli globally:
npm install -g babel-cli
Now you will need to install babel-preset-env locally, so within your project directory do:
npm install --save babel-preset-env
Finally this is how to set up your bundle with flask-assets:
from flask_assets import Bundle, Environment
from webassets.filter import get_filter
assets = Environment()
assets.init_app(app)
babel = get_filter('babel', presets='babel-preset-env')
assets.register('js_all', Bundle(
'js/code_with_es2016.js',
output='public/js/code.min.js',
filters=[babel, 'rjsmin']
))
You can also tell babel where your babel-preset-env is installed by specifying the absolute or relative path to it:
preset_location = './path/to/node_modules/babel-preset-env'
babel = get_filter('babel', presets=preset_location)
assets.register('js_all', Bundle(
'js/code_with_es2016.js',
output='public/js/code.min.js',
filters=[babel, 'rjsmin']
))
And one last thing, and this is only (like) my opinion, I would highly recommend switching over to javascript/node based build process for your frontend assets (you are using babel already!). Depending on what you are developing gulp or webpack can be good candidates to use for your frontend build. Flask-assets/webassets just seem unnecessary because they're lagging behind with docs and package versions of whatever the latest and greatest in the frontend world is.
It's good that I can run NPM scripts not only from the project root but also from the subfolders. However, with constraint that it can't tell my current working path ($PWD).
Let's say there's a command like this:
"scripts": {
...
"pwd": "echo $PWD"
}
If I run npm run pwd within a subfolder of the project root (e.g, $PROJECT_ROOT/src/nested/dir), instead of printing out my current path $PROJECT_ROOT/src/nested/dir, it always gives $PROJECT_ROOT back. Are there any way to tell NPM scripts to use my current working directory instead of resolving to where package.json resides?
Basically I want to pull a Yeoman generator into an existing project and use it through NPM scripts so that everyone can use the shared knowledge (e.g, npm run generator) instead of learning anything Yeoman specific (e.g npm i yo -g; yo generator). As the generator generates files based on current working path, while NPM scripts always resolves to the project root, I can't use the generator where it intend to be used.
If you want your script to use different behavior based on what subdirectory you’re in, you can use the INIT_CWD environment variable, which holds the full path you were in when you ran npm run.
Source: https://docs.npmjs.com/cli/run-script
Use it like so:
"scripts": {
"start": "live-server $INIT_CWD/somedir --port=8080 --no-browser"
}
Update 2019-11-19
$INIT_CWD only works on *nix-like platforms. Windows would need %INIT_CWD%. Kind of disappointing that Node.js doesn't abstract this for us. Solution: use cross-env-shell live-server $INIT_CWD/somedir.... -> https://www.npmjs.com/package/cross-env
One known solution is through ENV variable injection.
For example:
Define scripts in package.json:
"pwd": "cd $VAR && echo $PWD"
Call it from anywhere sub directories:
VAR=$(pwd) npm run pwd
However, this looks really ugly, are there any cleaner/better solutions?
With node 8+ you can automate the ENV variable injection.
1.- In $HOME/.node_modules/ (a default node search path) create a file mystart with
process.env.ORIGPWD = process.env.PWD
2.- Then in your $HOME/.bashrc tell node to load mystart every time
export NODE_OPTIONS="-r mystart"
3.- Use $ORIGPWD in your scripts. That works for npm, yarn and others.
I need to run npm install && gulp build inside my static/semantic-ui folder, so it creates the needed css file.
I saw this example with Setup.hs, however on my scaffolded project I don't have it, so my question where is the right place to put the code to run those bash commands.
If you're using the default Yesod scaffolding (generated by stack tool), then it indeed doesn't contain Setup.hs (which is a bit weird, as their own guide - https://github.com/commercialhaskell/stack/blob/master/doc/GUIDE.md - recommends having it as a good practice)
Setup.hs should be located in main project directory (same where stack.yml and yourproject.cabal are located) and content should be roughly the same as in your included example (defaultMainWithHooks is the key part).
Details of hooks usage are specified in https://www.haskell.org/cabal/users-guide/developing-packages.html and in cabal spec: https://hackage.haskell.org/package/Cabal-1.24.0.0/docs/Distribution-Simple.html
BTW, for now stack doesn't support pre-build hooks on its own (for details see: https://github.com/commercialhaskell/stack/issues/503), so you have to stick to ones provided by cabal - that's where Setup.hs comes from.
I'm trying to build my Electron app with Electron-packager. The problem is my Electron app using node-notifier module. When the packaging, I'm using this command:
electron-packager . MahApp --ignore='node_modules|.sass-cache|src' --platform=darwin --arch=x64
but the problem is that command ignores all node modules. So I edited like this:
electron-packager . MahApp --ignore='node_modules\/(?!node-notifier).+|.sass-cache|src' --platform=darwin --arch=x64
It seems working because only 'node_modules/node-notifier' is inside of resources/app. But it won't work because node-notifier module itself has extra node modules under the node_modules directory like this:
./MahApp/node_modules/node-notifier/node_modules/...
So it didn't work because any dependencies are not exists. My regex in --ignore_path also ignored inside of node_modules in node_notifier. I don't know what should I do now. I tried to specify the relative path like this:
--ignore='./node_modules\/(?!node-notifier).+|...'
but it wasn't work.
Do you actually need the node-notifier module? If not, you can npm uninstall node-notifier --save, or alternatively, put it only in dev-dependencies and run it with --prune option
I have followed the ember-cli instructions for referencing the master branch in development.
It works fine when I use a new ember project.
However when I try linking to an existing ember project i get this kind of error:
Merge error: file "bootstrap/.bower.json" exists in vendor and vendor - pass option { overwrite: true } to mergeTrees in order to have the latter file win
I have tried everything to get rid of this (i.e. clone repository, and initialize things one step at a time.
The occurs once I install stefanpenner/loader.js#1.0.1
Fundamental problem is that vendor directory has changed to bower_components directory.
this leaves the .bowerrc file pointing to "vendor" which seems to cause the problem.
make sure to - delete .bowerrc file or update it so it points to bower-components
This will happen as long as you do everything in the right order
go to directory containing your working copy (master) of ember-cli
npm link
go to your code directory
npm link ember-cli
ember init (make sure to update .bowerrc, and update/merge .gitignore, bower.json, package.json)
you should be good to go
The problem I was having was running bower install BEFORE ember init (per the ember-cli web page)
This was installing stuff in the vendor directory, so you end up with duplicates.