Diferencias

Muestra las diferencias entre dos versiones de la página.

--- wiki2:webdev [2014/12/28 17:43]
alfred [SaSS]
+++ wiki2:webdev [2020/05/24 10:14] (actual)
@@ Línea 1: / Línea 1: @@
 ====== Web development tools ======
-===== Bower =====
+===== Node =====
+==== Install module & save it as dependence ====
-==== Grunt ====
+<code>
+$ npm install <module> --save
+</code>
-Each time ''grunt'' command is run it looks for a locally Grunt instance using node's require() system, so you can run grunt for any sub-folder. The configuration is in files ''package.json'' and ''Gruntfile''. \\
+==== Install module & save it as a dev dependence ====
-==== Yeoman ====
-It will prepare a web project for you. First you must install a project generator: ''npm install --global generator-angular@0.9.2''. You will find generators at: [[http://yeoman.io/generators/]]. \\
-==== SaSS ====
+<code>
-  * {{:wiki2:webdev:assembling_sass_slides.pdf|Sintaxis}}
+$ npm install <module> --save-dev
+</code>
-Once SaSS is installed, to compile you will do: ''sass test.scss test.css''. Probably you do not want to compile a file each time you edit it, but do it automatically. For that: ''sass --watch test.scss:test.css''.
+===== Gulp =====
-==== Bourbon ====
+==== Basic script (gulpfile.js) ====
+<code>
+var gulp = require('gulp');
+gulp.task('default', function() {
+  // place code for your default task here
+});
+</code>
+Execute it:
+<code>
+$ gulp
+</code>
+If there was not a ''default'' but, for ex., ''deploy'':
+<code>
+$ gulp deploy
+</code>
-==== Neat ====
+==== Indicate src and dest folders ====
+<code>
+var gulp = require('gulp')
-==== Bitter ====
+gulp.task('deploy', function () {
+    return gulp.src('app/*.js')
+        .pipe(gulp.dest('dist'));
+});
+</code>
-==== Refills ====
+:!: remember to return so there was another task which depended of this could use it
+==== Add another command to execute prior to the current ====
+<code>
+gulp.task('deploy', ['prior-task1', 'prior-task2'], function () { ...
+</code>
+===== Tools for web development =====
+==== Automatically reload static pages ====
+  * https://www.npmjs.com/package/reload
+With reload installed you can do ''reload -b'' into your root path an it will automatically reload when some of its inner files change.
+==== Emmet ====
+=== Forms ===
+<code>
+form>input[type=text]+input[type=password]+submit
+</code>
+<code>
+<form>
+    <input type="text">
+    <input type="password">
+    <submit></submit>
+</form>
+</code>
+===== Tips and notes =====
+==== Test external authenticator ====
+You have to prepare one of your servers to accept a connection from the authenticator.
+For example, in Caddy:
+<code>
+fok.surrealistic.xyz {
+    proxy / localhost:8000
+    header / Strict-Transport-Security "15768000"
+}
+</code>
+Or in Nginx:
+<code>
+</code>
+Then you configure the authenticator to your url: ''https://fok.surrealistic.xyz/login''
+And add a tunnel to your server from your machine on the chosen port:
+<code>
+ssh -R "0.0.0.0:8000:0.0.0.0:8000" codi
+</code>

Programming

Herramientas de usuario

Herramientas del sitio

Diferencias

Herramientas de la página