I'm using Laravel mix in my project. I need to alter the app.css in the public folder, whenever i comment or delete styles and run npm run dev the styles come back. I need them gone. How do I permanently stop this?
The files in public generated by npm run [production|dev] are compiled versions of the application's source files. These files should be treated as immutable: they are written once during the compilation process and never to be written to again. Any changes you need to make to the output should be done in the compilation process, whether that's by modifying the source files or by adjusting the way that the compilation process works. Every time you run npm run dev it replaces the old files with the new.
You can find the source files for your application in resources/assets. If you're not sure how to make a specific change please create a new question outlining the problem you're having, e.g: "I want to remove this style from my app.scss but I don't know how".
I'm working on a plugin for Moodle that involves a lot of compiled JavaScript. Because of the complexity of the plugin, I'm writing it in TypeScript and compiling it with Webpack. This is all working fine.
However, Moodle has built-in Grunt tasks to help with JavaScript deployment, including uglifying the code. My compiled code is already minified, so this step isn't necessary. For some reason, putting the compiled code through the uglifier creates errors in the browser that aren't present with the non-uglified version. Because of this, I'm hoping to find some way to override the Grunt task.
The Grunt task is pretty simple; it uses a glob to find all javascript files in the various plugin folders in Moodle. I don't want to modify the top-level Gruntfile so that others can use this plugin without having to touch the core Moodle files. Is there a way I can create a Gruntfile (or some other flag) inside my plugin's directory that signals the parent Gruntfile to ignore my compiled file?
Unfortunately, removing my file from the watched folder is not an option. In development mode, Moodle serves the pre-compiled "src" script, so I need to keep the file there for development purposes (otherwise, I need to manually purge the cache each time I want to load the updated file).
Here's a general overview of what's happening:
Directory structure:
public (main Moodle directory)
Gruntfile.js
local
my-plugin
amd
src
my-webpack-compiled-plugin.js
build
my-webpack-compiled-plugin.min.js
my-webpack-compiled-plugin.js is the file output by Webpack (the file I don't want to be uglified)
The Gruntfile.js contains, amongst other things, this:
amd: {
files: ['**/amd/src/**/*.js'],
tasks: ['amd']
}
The amd task is where the files get uglified.
So I'm hoping to find some way to exclude local/my-plugin/amd/src/my-webpack-compiled-plugin.js from getting to the amd task from within the /local/my-plugin directory to keep my plugin self-contained.
I'm setting up a meteor project in Webstorm and so I added less, and converted my .css file to .less.
Webstorm sees that this is a .less file and prompts me to add a watcher.
Given that this is a meteor project, is it necessary to add the watcher or does Meteor take care of this?
No need to use file watchers - if meteor less package is added, meteor takes care of compiling your .less files
I'm developing html/css in Sublime. I'm writing my css with sass and using Sublime's build system to generate the css file on file save. It's also configured to upload on save using the SFTP plugin.
My problem is that the generated css file doesn't get uploaded as that isn't the file I've directly saved. I've tried to see if there is a way for the SFTP plugin to upload all files that have been modified locally, but it doesn't seem to support that.
Is there anything I can do to achieve this?
I'll throw my solution into the mix, just in case anyone stumbles on this as I did and wants to stick as close to a solely ST-based workflow as possible. If you're using the SFTP package for ST, there is an option to monitor files for external saves.
Unfortunately, using the ST build system to compile my SASS somehow slipped by SFTP. SASS CLI's watch utility, however, triggers the upload just fine. Once set, presuming the target file remains open, SFTP will upload it after each build.
To recap,
Open target file, followed by the command palette. Enter SFTP: Monitor File (Upload on External Save)
Start whatever CLI watch/build utility you prefer, for me, Sass: sass --watch app.scss:app.css
Leave target file open, otherwise the SFTP monitor seems to cease.
Enjoy!
NOTE: You can also enable file monitoring from the sidebar by right clicking on the file you wish to monitor and selecting...
SFTP has an option for that. Search on Package control for SFTP > Monitor file. Once selected, "SFTP monitoring" will appear on bottom command info. Now on every save, both sass and complied css will be uploaded to their respetive folders.
Because Sublime SFTP doesn't seem to support this, you'll probably have to go a different route.
I would recommend using something that monitors your css folder, and automatically uploads any changes to your server. Using good ol' fashion WinSCP (if you're on Windows) would work, but any way to sync folders works.
http://winscp.net/eng/docs/task_keep_up_to_date
I ended up scrapping SFTP and using ExpanDrive. Fits my workflow perfectly.
I'm still using Sublime SFTP to upload script files (js/css/php etc). Usually I press shortcuts to upload opened files (Ctrl Alt U + N). But it was annoying especially with frequent trial disclaimer window.
I wrote a simple tool on nodejs which monitors project folder and uploads any file on its change. It's not perfect but made my workflow much comfortable: https://github.com/liberborn/live-uploader.
Also note that you can map a local copy of your files to the remote copy, by opening the local folder in Sublime, then right-click on it in the sidebar, and select SFTP/FTP -> Map to Remote... to set up the connection, making sure to enter the appropriate remote_path to map the folder to.
Then you can do your build/compile, open the local compiled file(s), right-click on the code, and in the SFTP/FTP menu, select the Monitor File option.
Now when you build again in future, with the compiled file(s) still open, they will get uploaded to the server shortly afterwards (as well as being refreshed in Sublime when you switch tab to view them).
There's a way to force Sublime SFTP plugin to upload compiled files, if your CoffeeScript/Sass/Less files are compiled when you save a file.
Go to Sublime Menu → Tools → Developer → New Plugin..., and copy-paste the code below:
import sublime, sublime_plugin, re, os
class SftpAutoUpload(sublime_plugin.EventListener):
def is_remote_file(self, file_name):
while file_name != os.path.abspath(os.sep):
file_name = os.path.dirname(file_name)
sftp_config = file_name + '/sftp-config.json'
if os.path.exists(sftp_config):
return True
return False
def on_post_save_async(self, view):
window = view.window()
file_name = view.file_name()
# Upload compiled files to SFTP when saving a file (Coffee, Sass, Less)
if self.is_remote_file(file_name):
extensions = { 'coffee': 'js', 'less': 'css', 'sass': 'css' }
for extension, compiled in extensions.items():
matches = re.match('^(.*)\.'+extension+'$', file_name)
if matches is not None:
compiled_file = matches.group(1) + '.' + compiled
if os.path.exists(compiled_file):
new_view = window.open_file(compiled_file)
window.run_command("sftp_upload_file")
new_view.close()
Save the file as sftp-auto-upload.py. Restart Sublime.
What the plugin does is the following:
it checks if you're editing a CoffeeScript, Sass or Less file;
if a compiled file exists, then the compiled file is opened in Sublime
SFTP: Upload File command is executed, and the compiled file is closed.
All this happens almost instantly, so you don't even notice that a new tab was opened.
The code can be improved, but it does the trick.
After a somewhat comprehensive evaluation of IDEs for use in front end development, WebStorm leads the pack I think.
The one missing piece is that we can't configure JSHint the way we need to. The WebStorm preferences GUI provides some options, but not the full set. The GUI only lets you configure 15 of the 30 or so actual available options.
This is a problem because we don't want to change our coding practices just because an IDE doesn't let us configure linting the way we want.
Is there a hacky way to go in and adjust the JSHint library behind the scenes for WebStorm?
You can configure all the options you'd like in a .jshintrc file located in the root directory of your project. This will be a project-wide setting.
From https://www.jetbrains.com/webstorm/webhelp/jshint.html:
Use config files
Select this check box to have the code verified according to the settings from a configuration file. A configuration file is a JSON file with the extension .jshintrc that specifies which JSHint options should be enabled or disabled. WebStorm will look for a .jshintrc file in the working directory. If the search fails, WebStorm will search in the parent folder, then again in the parent folder. The process is repeated until WebStorm finds a .jshintrc or reaches the project root. To have WebStorm still run verification in this case, specify the default configuration file to use.
I've been using this for a while and it works great. Plus you can commit it to your repo and ensure the entire team follows the same code style. Also a great place to add globals.
I'm not aware of any hacky way to do it, but you can vote for the existing feature request.
There's a per-file solution that works, but is not ideal. Would prefer an IDE or project-wide fix/hack.
Set JSHint options at the top of your file:
/*jshint laxcomma:true, asi:true */