feat: Adiciona arquivo html na past dist e cria um servidor pra rodar a aplicação

This commit is contained in:
Saulo Klein Nery 2022-11-13 21:19:16 -03:00
parent 860542baa4
commit f3ba8c6455
4 changed files with 1214 additions and 36 deletions

View File

@ -1,29 +1,60 @@
const { src, dest, watch } = require("gulp");
const { src, dest, watch, parallel } = require("gulp");
const sass = require("gulp-sass")(require("sass"));
const browserify = require("browserify");
const source = require("vinyl-source-stream");
const uglify = require("gulp-uglify");
const buffer = require("vinyl-buffer");
const connect = require("gulp-connect");
const paths = {
html: {
all: "src/templates/**/*.html",
},
styles: {
all: "src/styles/**/*.scss",
main: "src/styles/main.scss",
},
scripts: {
all: "src/scripts/**/*.js",
main: "src/scripts/app.js",
},
output: "dist",
};
function server() {
connect.server({
root: paths.output,
livereload: true,
port: 3000,
});
}
function html() {
return src(paths.html.all).pipe(dest(paths.output)).pipe(connect.reload());
}
function styles() {
return src("src/styles/main.scss")
return src(paths.styles.main)
.pipe(sass({ outputStyle: "compressed" }).on("error", sass.logError))
.pipe(dest("dist"));
.pipe(dest(paths.output))
.pipe(connect.reload());
}
function scripts() {
return browserify("src/scripts/app.js")
return browserify(paths.scripts.main)
.transform("babelify", { presets: ["@babel/preset-env"] })
.bundle()
.pipe(source("bundle.js"))
.pipe(buffer())
.pipe(uglify())
.pipe(dest("dist"));
.pipe(dest(paths.output))
.pipe(connect.reload());
}
function sentinel() {
watch("src/styles/**/*.scss", { ignoreInitial: false }, styles);
watch("src/scripts/**/*.js", { ignoreInitial: false }, scripts);
watch(paths.html.all, { ignoreInitial: false }, html);
watch(paths.styles.all, { ignoreInitial: false }, styles);
watch(paths.scripts.all, { ignoreInitial: false }, scripts);
}
exports.sentinel = sentinel;
exports.default = parallel(server, sentinel);

1146
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -5,7 +5,7 @@
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "gulp sentinel"
"dev": "gulp"
},
"repository": {
"type": "git",
@ -19,6 +19,7 @@
"babelify": "^10.0.0",
"browserify": "^17.0.0",
"gulp": "^4.0.2",
"gulp-connect": "^5.7.0",
"gulp-sass": "^5.1.0",
"gulp-uglify": "^3.0.2",
"sass": "^1.56.1",

View File

@ -15,7 +15,7 @@
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="../../dist/main.css" />
<link rel="stylesheet" href="./main.css" />
</head>
<body>
@ -70,6 +70,6 @@
</section>
</main>
<script src="../../dist/bundle.js"></script>
<script src="./bundle.js"></script>
</body>
</html>