Is there a simple HTML preprocessor available to use for existing HTML code, that I won't need to modify my existing html to conform with preprocessors syntax?
I'm developing a mobile app with a few pages built with html, however i've started having the problem of having to update each page for when making changes to similiar content (header, footer etc) I don't want to duplicate content and have mismatches, rather i'd like to use a preprocessor that has an include method (something like how php does it), so that I can include these similiar contents.
I've looked at stuff like HAML & Jade, but it seems they have a strict syntax you need to follow with indents and the sort or editing html to include pipes on each line, else things wont compile.
Like I said I have existing html I would just like to cut & paste my HTML into different files, include them and stick with that workflow as I think it's the simplest.
But if anyone has any other ideas how I can tackle my situation that is welcomed too.
I guess since your requirement is to only include files that you don't need a full blown template system . You could take a look at gulp-include which is a gulp plugin to include files. Using gulp has the advantage that gulp comes with a watch feature to watch the file system for changes - whenever a change is detected a task can be triggered.
An example how your gulpfile.js could look like
var gulp = require('gulp');
var include = require('gulp-include');
gulp.task('template', function() {
return gulp
.src('*.html')
.pipe(include())
.pipe(gulp.dest('dist'))
});
gulp.task('dev', function() {
gulp.watch('*.html', ['template']);
});
gulp.task('default', ['template']);
This gulpfile registers a 'template' task that takes all html files and processes the file's contents with the gulp-include plugin. The template task is registed as default gulp task. So if you invoke gulp without any command line args then the template task is run. The gulp 'dev' task allows you to run gulp dev from the command line that watches all html files for changes and triggers the template task whenever a html file changes.
The gulp include plugin scans your html files for something like
= include relative/path/to/file.html
and includes 'file.html' contents.
The include syntax is quite well documented on the gulp-include web site.
Related
I am trying to move away from WebStorm and trying to configure VS Code to get few functionalities of WebStorm. I am trying to implement File Watcher functionality in VS Code.
I used to have File Watchers for Jade and Stylus in WebStorm. I already have gulp tasks for them and have added them in tasks.json as well. I have even provided keybindings for them too. But I have to run them manually. What I want is, whenever a file is saved, it checks whether it is a Jade file or a Stylus file and then run the appropriate task to generate either HTML or CSS file.
Is it possible to do it in VS Code yet? If yes, then how can I do that?
You must create an extension to accomplish your scenario. You said you already have gulp and task.json with your automation, so I think it would be relatively easy to translate that to an extension.
You should take care with this points when creating your extension
package.json
You extension should work for Jade or Stylus, so the package.json file should have:
"activationEvents": [
"onLanguage:Jade",
"onLanguage:Stylus"
]
OnSave Event
There are two events that you could use to detect file saving: onDidSaveTextDocument or onWillSaveTextDocument, depending on your needs.
FileWatcher
VSCode has a built in FileWatcher, you just have to create it via vscode.workspace.createFileSystemWatcher. The point is that it just monitors files within the opened folder/project.
If you need to detect changes outside, you should use fs.watchFile or chokidar.
Publishing/Installing
Don't worry if you think your extension only works for you or you can't publish on marketplace, for any reason, because you can create your own extensions, package them and install locally.
I'm using gulp to convert markdown files to HTML, and using the gulp-watch plugin (not the gulp.watch API function) to rebuild files if they change. Works great!
gulp.task('markdown', function () {
gulp.src('src/**/*.md')
.pipe(watch('src/**/*.md'))
.pipe(markdown())
.pipe(template('templates/md.tpl'))
.pipe(gulp.dest('dist'));
});
The problem is that the pipeline src is the markdown files, but within the pipeline I also reference a template file. If that template changes, all the markdown files need to be rebuilt. Is there a way to express that dependency in gulp/gulp-watch?
I tried using gulp.watch (the API function) to watch the template and run the 'markdown' task if it changes ...
gulp.watch('templates/md.tpl', ['markdown']);
... but that didn't work. Nothing happens. I assume having gulp-watch in the pipeline prevents it from doing anything.
I guess I could create a two tasks, one with gulp-watch and one without, and use the one without to force a full rebuild. I'd rather not, because then it becomes an ongoing problem to keep the two in sync.
Is there a better way?
I guess I could create a two tasks, one with gulp-watch and one without, and use the one without to force a full rebuild. I'd rather not, because then it becomes an ongoing problem to keep the two in sync.
Remember, gulp is just JavaScript.
Simply write a function that constructs the stream with or without the watch() step depending on a parameter that you pass. The gulp-if plugin let's you write something like this in a very concise way (although it's not necessary and could be done without it).
Here's how I would do it:
var gulpIf = require('gulp-if');
function processMarkdown(opts) {
gulp.src('src/**/*.md')
.pipe(gulpIf(opts.watch, watch('src/**/*.md')))
.pipe(markdown())
.pipe(template('templates/md.tpl'))
.pipe(gulp.dest('dist'));
}
gulp.task('markdown', function() {
processMarkdown({watch: true});
watch('templates/md.tpl', function() {
processMarkdown({watch: false});
});
});
You can specify gulp src as an array, too:
gulp.src(['src/**/*.md', 'templates/md.tpl'])
I'm trying to figure out if it is worthwhile moving to webpack, I am leaning towards saying no - figuring I have more important stuff to do - but I would like to see some practical examples of how to make webpack work.
So if I have the following Gulp.js task how would I do them as a webpack task?
gulp.task('subpaths', ['clean_subpaths'],function() {
//Minify and copy all JavaScript (except vendor scripts)
gulp.src(paths.subpath_scripts)
.pipe(fileinclude({
prefix: '##',
basepath: '#file'
}))
.pipe(contextswitch())
.pipe(uglify())
.pipe(strip())
.pipe(rename(function (path) {
path.basename += timestamp;
}))
.pipe(gulp.dest('public/longcache/javascripts/subpath'));
});
So the tasks above do -
include files inside of other files for processing.
run the piped content through my own defined code - I guess in webpack
that would be run my own plugin?
uglify
remove console statements
rename the output file so it has a version.
write out to a specific location
The first item -- include files inside of other files -- is one of webpack's biggest benefits, speaking as someone coming from an all grunt/gulp workflow. Instead of managing dependencies externally (in your build tools), and having to ensure that files are combined correctly based on their runtime dependencies, with webpack your dependencies are part of the codebase, as require() expressions. You write your app as a collection of js modules and each module loads the modules it relies on; webpack understands those dependencies and bundles accordingly. If you're not already writing your js in a modular fashion, it's a big shift, but worth the effort. This is also a reflection of what webpack is meant for -- it's conceptually oriented around building a js application, not bundling some js that your site uses.
Your second item would more likely be a custom loader, which is easier to write than a custom plugin. Webpack is very extendable, throughout, but writing custom integrations is poorly documented.
Webpack's Uglify plugin will also remove console.logs, super easy.
Specifying output details is part of your basic webpack config, just a couple of options to fill in.
I am trying to set up a similar process to what Web Essentials offered in the old visual studio in the newest one. For those of you who aren't familiar with how that worked, the process was:
File Setup:
a.less
a.css
a.min.css
a.css.map
b.less
b.css
b.min.css
b.css.map
So basically when you open a.less and start editing it, it would automatically check out a.css, a.min.css, and a.css.map as well. Then when you save, it would recompile the 3 sub files as well as saving the less file.
I am able to replicate this by writing a separate task for each file like so:
gulp.task('checkout', function () {
return gulp.src('Styles/brands.css')
.pipe(tfs());
});
gulp.task('less', ['checkout'], function () {
del('Styles/brands.css');
return gulp.src('Styles/brands.less')
.pipe(less())
.pipe(gulp.dest('Styles'));
});
This uses gulp-tfs-checkout to checkout the sub file, and then the less to compile. This works 100% how I expect it to. I can set up a watch to watch the less task and everything will work great. The only problem is, how do I expand this to handle all my less files in that folder? I could write separate checkout and compile tasks for each file, but that's not really ideal.
I am used to writing projects where saving any less file compiles and concats all of them into a single or a couple files, but this is a work project and for multiple reasons I need to keep the css files separate as they are now. We use visual studio's bundling, but its an older project and people have referenced the css files randomly outside of the bundling process so it would be a pretty big/risky task to change that.
I don't know how to watch many files, but only change the current one if that makes sense.
gulp.task('less', function () {
return gulp.src('Styles/*.less') //watch all of my files
.pipe(tfs())//checkout only the css file for the less file that was changed here somehow
.pipe(less()) //compile only the css file that was changed
.pipe(gulp.dest('Styles'));
});
I am fairly used to grunt and gulp, but like I said I generally do things in bulk on my project. I'm not sure how to do this when I want to watch all the files, but only change 1
Why don't you create all those tasks per each file dynamically? You can read the contents of the folder where your less files are with fs.readdirSync and then if the file is a less file you create for each the task 'checkout' + filename and then 'less' + filename.
Being dynamically you will not have any problems when you create a new less file or when you remove one.
This is a bit of a weird one:
I've got a gulp task that looks like this:
gulp.task('less', function () {
gulp.src('./less/main.less')
.pipe(sourcemaps.init())
.pipe(less({
plugins: [cleancss]
}))
.pipe(sourcemaps.write()) // will write the source maps to ./public/assets/css-dist/maps
.pipe(gulp.dest(paths.public + 'css/dist'));
});
I'm running this task from inside a play 1.3 project, and it generates the base64-encoded inline sourcemap, as expected, but when I load it up in chrome, all of the styles are mapping to line 1 of main.css, indicating that something is wrong.
Now, here's where it gets weird: if I run this same task, pointing at copies of the same files, in another project with an identical directory structure, just running under plain-ol' apache, it works exactly as expected. The output files appear exactly the same.
Does anyone have any insight as to why this would be?
FWIW, an extremely similar scenario plays out when minifying and concatenating my js, using gulp-uglify and gulp-concat
Try see if you can visualize the difference/mappings via this visualizer tool. If both compiled files are exactly the same between the two projects then it's likely due to the different ways you are serving/accessing the files? With the 2nd project did you also try to view the sourcemap via Chrome?
Just to clarify, not only are you writing an inline sourcemap, you're also embedding your sources so everything is within the compiled .css file, the external original source files are not the referenced source(sourceRoot will be /source/).