With Laravel Elixir when using mix.scripts() or mix.babel() the default behavior is to not minify unless the --production option is passed to gulp. Is it possible to reverse this and apply minification by default? Maybe even to disable it for one build from command line when it's really not needed?
Documentation mentions some way to configure Elixir, e.g., disable source maps, but I struggle to find a full list of configuration options...
You can do something like this:
elixir.config.production = true;
elixir(function(mix) { ...
Internally, Elixir defines the variable above to check the environment and modify the behaviour of certain recipes:
You could also maybe use yargs npm package to achieve the reverse, e.g. gulp --no-minify
gulpfile.js:
...
var argv = require('yargs').argv
elixir.config.production = true;
if (argv['no-minify'] !== undefined) {
elixir.config.production = false;
}
You can see the config source code here: https://github.com/laravel/elixir/blob/master/src/Config.js for other options that you may want to change.
Hope this helps.
Related
I am currently working on setting up a boilerplate that uses Gatsby. Everything so far has been very simple and easy to use, but I can't seem to fix one problem, which is getting SCSS glob hooked up with my global SCSS styling.
I currently have localized SCSS styling for each component. However, I also have a styles directory for my global styles(variables, typography...ect). This is also using SCSS and is working great. Now the last thing I want to do is get SCSS glob working so I can do imports like /**/*.scss within my global styles.
Currently, I am using the gatsby-plugin-sass and have included globImporter as an option within my gatsby-config.js file. However, it does not seem to do it for me.
From what I read node-sass-glob-importer should be what I need but no luck so far.
My configuration looks like the following
{
resolve: `gatsby-plugin-sass`,
options: {
importer: globImporter(),
cssLoaderOptions: {
camelCase: false,
},
},
},
I then try to do a global import in my scss like so #import "./**/*.scss"; but I get the following error:
An #import loop has been found:
has anyone set up scss glob on gatsby or see anything wrong with my configurations.
Thanks
If you're still having this issue (or in case anyone else is), here's what worked for me:
options: {
importer: function(url, prev, done) {
// url is the path in import as is, which LibSass encountered.
// prev is the previously resolved path.
// done is an optional callback, either consume it or return value synchronously.
// this.options contains this options hash, this.callback contains the node-style callback
var result = globImporter();
return {file: result.path, contents: result.data};
}
},
It was inspired by the example code on in the node-sass repo.
Make sure to also include var globImporter = require('node-sass-glob-importer') at the top of your file.
How can I compile a SASS file and have it output all the final values of every variable in a json file
I asked a similar question before and someone on here thought I was trying to get you guys to do my job. I'm just trying to see if it's possible at all before I go down a path that ultimately is a waste of time. If it is possible, I don't know the magic sauce to get started.
I have CMS themes that are built on bootstrap-sass, and other sass frameworks, and I'd like my CMS to be able to access variables that we use in the SASS files as well. Seems to me that if when I compiled the SAAS file, I got a CSS, MAP, and JSON file, I'd be all set.
I could write this as some kind of mixin, but even then, I'd need to be able to get
A list of all variables
a command to output json to the dist folder.
Any pointers on these items are appreciated.
If you're using Gulp to compile your SASS there is a plugin that accomplishes this.
https://www.npmjs.com/package/gulp-sass-json
After installing it, and given the following Gulpfile.js:
var sassJson = require('gulp-sass-json');
var paths = {
'json_root' : './bundles/theme/scss/variables/*.scss',
'json_dest' : './json'
};
var sassOptions = {
errLogToConsole: true,
outputStyle: 'expanded'
};
gulp.task('sass-json', function () {
return gulp
.src(paths.json_root)
.pipe(sassJson())
.pipe(gulp.dest(paths.json_dest));
});
gulp.task('default', ['sass-json']);
Given the SCSS file variables/colors.scss:
$red: #ed1414;
$blue: #0351e0;
$green: #259208;
Outputs the following json at ./json/colors.json
{
"red": "#ed1414",
"blue": "#0351e0",
"green": "#259208"
}
So in order to have it re-output it every time you compile, you can just create a task that encompasses this task as well as your normal style compile task.
I have a tslint.json file in my solution directory and I'm trying to create a custom rule following the guidelines on https://www.npmjs.com/package/tslint
I have created a "nonImportsRule.ts", have copied the code from the link and have added "no-imports": true to my tslint.json file however the rule is not being picked up.
The guide says that a rulesDirectory needs to be specified, but I have no idea where this should be configured?
Also - is it possible to setup Web Essentials to break the build if tslint rules are violated?
I had a same kind of a problem. I wanted to use the TSLint extensions, tslint-microsoft-contrib and codelyzer, together with Web Analyzer. This did not work. The first step to figure out why was to make an adaptation in server.js which can be found in C:\Users\[User]\AppData\Local\Temp\WebAnalyzer1.7.75. I changed the TSLint function into:
tslint: function (configFile, files) {
// Try catch tslint errors
try {
var tslint = require("tslint");
var options = {
formatter: "json",
configuration: JSON.parse(fs.readFileSync(configFile, "utf8").trim())
};
var results = [];
for (var i = 0; i < files.length; i++) {
var file = files[i];
var ll = new tslint(file, fs.readFileSync(file, "utf8"), options);
results = results.concat(JSON.parse(ll.lint().output));
}
} catch(error) {
// Return tslint error to visual studio so we can get some ideas for counter measures.
var result = JSON.parse('[{"endPosition": {"character": 0,"line": 0,"position": 0},"failure": "INSTALL ERROR","name": "/","ruleName": "INSTALL ERROR","startPosition": {"character": 0,"line": 0,"position": 0}}]');
result[0].failure = error.message;
return result;
}
return results;
},
The alternation resulted in error feedback in the visual studio error list when I run the Web Analyzer. Do not forget to force a new instance of node.exe with the task manager after you have applied the alternation. The feedback leaded, for my particular situation, to the following installation of npm packages in the following directories:
Packages:
"codelyzer": "0.0.12"
"tslint": "^3.7.3"
"tslint-microsoft-contrib": "^2.0.2"
"typescript": "^1.8.9"
Directories:
C:\Users\[User]\AppData\Local\Temp\WebAnalyzer1.7.75
C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE
After this, Web Analyzer was able to use the same tslint rules as my grunt task. Hopefully a newer version of Web Analyzer will solve my problems more elegantly.
Okay, i'm not using Web Essentials extension but Web Analyzer : https://visualstudiogallery.msdn.microsoft.com/6edc26d4-47d8-4987-82ee-7c820d79be1d
So i won't be able to answer on this question 100%, but i want to summarize here my experience with custom tslint rules. First of all, what is not completely clear from documentation is that the whole thing depends on node.js.
So first of all you need to install node js. This will give you npm command to your command line.
After install with npm tslint and typescript. https://github.com/palantir/tslint here are examples. These will create files in : "c:\Users[Username]\AppData\Roaming\npm\node_modules"
Go into "c:\Users[Username]\AppData\Roaming\npm\node_modules\tslint\lib\rules\". Create here noImportRule.ts. Copy the following content:
import * as ts from "typescript";
import * as Lint from "../lint";
export class Rule extends Lint.Rules.AbstractRule {
public static FAILURE_STRING = "import statement forbidden EDE";
public apply(sourceFile: ts.SourceFile): Lint.RuleFailure[] {
return this.applyWithWalker(new NoImportsWalker(sourceFile, this.getOptions()));
}
}
// The walker takes care of all the work.
class NoImportsWalker extends Lint.RuleWalker {
public visitImportDeclaration(node: ts.ImportDeclaration) {
// create a failure at the current position
this.addFailure(this.createFailure(node.getStart(), node.getWidth(), Rule.FAILURE_STRING));
// call the base version of this visitor to actually parse this node
super.visitImportDeclaration(node);
}
}
Note that in the example import lint is not given with relative path that won't work with this approach.
4. Fire the command : "tsc -m commonjs --noImplicitAny .\noImportsRule.ts". This will compile your custom rule's ts. You will get bunch of compilation errors, such as: ../enableDisableRules.d.ts(1,21): error TS2307: Cannot find module 'typescript'. That's a good question why are these thrown, but forget about them, js file will be generated anyway.
5. Put "no-imports": true to your tslint.json(for now this should be custom one). With this command from command line:
tslint -c 'sample.tslint.json' test.ts
you will get:
test.ts[1, 1]: import statement forbidden. So you made the custom rule working!!! :)
That's all for working from command line. In addition I made custom rules working with WebAnalyzer, at least temporary.
I needed to copy my custom rule's files here:
c:\Users[Username]\AppData\Local\Temp\WebAnalyzer1.6.65\node_modules\tslint\lib\rules\ and of course configure WebAnalyzer tslint.json to include custom rules.
I have no idea how Web Essentials extension makes this whole thing working with tslint, but i guess some way similar :). Somewhere there should be a folder (node_modules\tslint\lib\rules) with rules what tslint uses. There you need to copy your custom ones.
Of course the most elegant solution would be to modify Web Essentials extension itself and make the tslint's custom rules directory configurable from visual studio. (so my solution is just a workaround)
Here is my custom rule example in the visual studio warning's list:
The question is - how to force Laravel Elixir not to generate map files?
At the moment if I run gulp I will have generated app.css and app.css.map file. I don't know what for is this app.css.map file but I think it's not necessary for me at the moment. Question is - how to force gulp not to generate this file?
At the moment my gulpfile.js looks like this:
var elixir = require('laravel-elixir');
elixir(function(mix) {
mix.sass('app.scss', 'public/css/app.css');
});
This is no longer achievable via elixir.extend() syntax, instead the official documentation now suggests to use this:
elixir.config.sourcemaps = false;
Starting from Elixir 3.0 you can put a JSON object that will override the default configuration in elixir.json:
{
"sourcemaps": false
}
.map files are called source maps. Their purpose is to map the contents of a concatenated, minified file to it's original files to make debugging easier.
You can disable them by changing elixirs config using extend() in your gulpfile
elixir.extend('sourcemaps', false);
Note that source maps are disabled by default when running in production.
I'm using Sublime Text as a text editor.
There's a jsFormat for formatting javascript files but I can't find one for JSX.
How you guys deal with formatting JSX?
Update 4
Check prettier, not that configurable as esformatter, but currently used to format some big projects (like React itself)
Update 3
Check sublime jsfmt. If you add esformatter-jsx to the config and install the package inside the forlder for sublime-jsfmt. You will be able to format JSX files directly from Sublime. Here is a guide for that
Update 2
from the command line you can also use esbeautifier. It is a wrapper around esformatter that accept a list of globs to format
# install the dependencies globally
npm i -g esbeautifier
# beautify the files under src/ and specs/ both .js and .jsx
esbeautifier src/**/*.js* specs/**/*.js*
Update
So I ended up doing a plugin for esformatter to enable the formatting of JSX files:
https://www.npmjs.com/package/esformatter-jsx
Here is a live demo on requirebin
It should be somehow feasible to call esformatter from Sublime passing the current file as the argument. In any case to use it from the command line you can follow these instructions:
From the command line it can be used like this:
# install the dependencies globally
npm i -g esformatter esformatter-jsx
# call it (this will print to stdout)
esformatter --plugins=esformatter-jsx ./path/to/your/file
# to actually modify the file
esformatter --plugins=esformatter-jsx ./path/to/your/file > ./path/to/your/file
# to specify a config file (where you can also specify the plugins)
# check esformatter for more info about the configuration options
esformatter -c ./path/to/.esformatter ./path/to/your/file > ./path/to/your/file
==== old answer below ===
So if what you're looking is just to make your jsx files to be formatted while allowing the jsx syntax (basically beautify all the javascript syntax and ignore jsx tags, meaning leave them as is), this is what I'm doing using esformatter
// needed for grunt.file.expand
var grunt = require('grunt');
// use it with care, I haven't check if there
// isn't any side effect from using proxyquire to
// inject esprima-fb into the esformatter
// but this type of dependency replacement
// seems to be very fragile... if rocambole deps change
// this will certainly break, same is true for esformatter
// use it with care
var proxyquire = require('proxyquire');
var rocambole = proxyquire('rocambole', {
'esprima': require('esprima-fb')
});
var esformatter = proxyquire('esformatter', {
rocambole: rocambole
});
// path to your esformatter configuration
var cfg = grunt.file.readJSON('./esformatter.json');
// expand the files from the glob
var files = grunt.file.expand('./js/**/*.jsx');
// do the actual formatting
files.forEach(function (fIn) {
console.log('formatting', fIn);
var output = esformatter.format(grunt.file.read(fIn), cfg);
grunt.file.write(fIn, output);
});
I would actually like that esformatter use a version of rocambole that use esprima-fb instead of esprima, to avoid proxyquire.
There is a setting in the HTML-CSS-JS Prettify plugin that allows you to ignore xml syntax in the js/jsx file. That way it doesn't mess up the jsx code.
The setting is: "e4x": true in the "js" section of the settings file
Preferences > Package Settings > HTML\CSS\JS Prettify > Set Prettify Preferences
This does not work well if you have self closing tags eg. tags ending in />
You can install a JsPrettier package for Sublime 2 & 3. It's a fairly new JavaScript formatter (at the time of writing this: Feb-2017). It supports most of the latest developments like: ES2017, JSX, and Flow.
Quickstart
Install prettier globally using terminal: $ npm install -g prettier
In Sublime go to Tools -> Command Palette... -> Package Control: Install Package, type the word JsPrettier, then select it to complete the installation.
Format your file using context menu inside the editor or bind it to a keyboard shortcut: { "keys": ["super+b"], "command": "js_prettier" }
Links:
https://github.com/jonlabelle/SublimeJsPrettier
https://github.com/jlongster/prettier
To add to what #Shoobah said:
There is a setting in the HTML-CSS-JS Prettify plugin that allows you
to ignore xml syntax in the js/jsx file. That way it doesn't mess up
the jsx code. The setting is: "e4x": true in the "js" section of the
settings file
Go to: Preferences > Package Settings > HTML\CSS\JS Prettify > Set
Prettify Preferences
Go to "js" section:
Add "jsx" to the "allowed_file_extension", and then change "e4x" to "true"
the answer in the internet that always told you set 'e4x' to true,
but sometimes, we have to set option of 'format_on_save_extensions' then add 'jsx' in array
modify jsFormat.sublime-settings
{
"e4x": true,
"format_on_save": true,
"format_on_save_extensions": ["js", "json", "jsx"]
}
Using Sublime's Package Installer, install Babel. Then:
Open a .jsx file.
Select View from the menu,
Then Syntax -> Open all with current extension as... -> Babel -> JavaScript (Babel).
Not specifically for Sublime Text, but there is a beautifier in JavaScript for React JSX.
http://prettydiff.com/?m=beautify claims to support JSX at:
http://prettydiff.com/guide/react_jsx.xhtml