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 sass = require("gulp-sass")(require("sass"));
const browserify = require("browserify"); const browserify = require("browserify");
const source = require("vinyl-source-stream"); const source = require("vinyl-source-stream");
const uglify = require("gulp-uglify"); const uglify = require("gulp-uglify");
const buffer = require("vinyl-buffer"); 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() { function styles() {
return src("src/styles/main.scss") return src(paths.styles.main)
.pipe(sass({ outputStyle: "compressed" }).on("error", sass.logError)) .pipe(sass({ outputStyle: "compressed" }).on("error", sass.logError))
.pipe(dest("dist")); .pipe(dest(paths.output))
.pipe(connect.reload());
} }
function scripts() { function scripts() {
return browserify("src/scripts/app.js") return browserify(paths.scripts.main)
.transform("babelify", { presets: ["@babel/preset-env"] }) .transform("babelify", { presets: ["@babel/preset-env"] })
.bundle() .bundle()
.pipe(source("bundle.js")) .pipe(source("bundle.js"))
.pipe(buffer()) .pipe(buffer())
.pipe(uglify()) .pipe(uglify())
.pipe(dest("dist")); .pipe(dest(paths.output))
.pipe(connect.reload());
} }
function sentinel() { function sentinel() {
watch("src/styles/**/*.scss", { ignoreInitial: false }, styles); watch(paths.html.all, { ignoreInitial: false }, html);
watch("src/scripts/**/*.js", { ignoreInitial: false }, scripts); 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", "main": "index.js",
"scripts": { "scripts": {
"test": "echo \"Error: no test specified\" && exit 1", "test": "echo \"Error: no test specified\" && exit 1",
"dev": "gulp sentinel" "dev": "gulp"
}, },
"repository": { "repository": {
"type": "git", "type": "git",
@ -19,6 +19,7 @@
"babelify": "^10.0.0", "babelify": "^10.0.0",
"browserify": "^17.0.0", "browserify": "^17.0.0",
"gulp": "^4.0.2", "gulp": "^4.0.2",
"gulp-connect": "^5.7.0",
"gulp-sass": "^5.1.0", "gulp-sass": "^5.1.0",
"gulp-uglify": "^3.0.2", "gulp-uglify": "^3.0.2",
"sass": "^1.56.1", "sass": "^1.56.1",

View File

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