Javascript

JavaScriptのモジュールとは、そのままで部品というイメージ。 JavaScriptで書いたファイルを部品として、他のファイルに取り込むことで機能を拡張することができるのがメリット。 ...

HTML、CSSコーディング作業で使用している私のgulpfileのサンプルを置いておく。 "use strict" const gulp = require('gulp') const sass = require('gulp-sass') //scssコンパイル const autoprefixer = require("gulp-autoprefixer")//べンダープレフィックス const sassGlob = require("gulp-sass-glob")//import文を短くまとめる const cleanCSS = require('gulp-clean-css')//cssフォーマッタ const notify = require('gulp-notify') //エラーを通知 const plumber = require('gulp-plumber') //watch中にエラー防止 const sourcemaps = require('gulp-sourcemaps')//ソースマップ const ejs = require("gulp-ejs") //EJS const rename = require('gulp-rename')//リネーム const replace = require("gulp-replace")//置換 const browserSync = require("browser-sync")//自動リロード const del = require('del')//削除 // paths const paths = { src: 'src', dist: 'dist' } //scssコンパイル gulp.task("sass", () => { return gulp.src(paths.src + "/scss/style.scss") .pipe(plumber({ errorHandler: notify.onError("Error: <%= error.message %>") })) .pipe(sourcemaps.init()) .pipe(sassGlob()) .pipe(sass()) .pipe(autoprefixer({ grid: true })) .pipe(cleanCSS({format: 'beautify'})) .pipe(sourcemaps.write(paths.dist + "/css")) .pipe(gulp.dest(paths.dist + "/css")) .pipe(notify({ title: 'Sassをコンパイルしました。', message: new Date(), sound: 'Tink', })) }) //EJS gulp.task("ejs", () => { return gulp.src([paths.src + "/ejs/**/*.ejs", "!" + paths.src + "/ejs/**/_*.ejs"]) .pipe(ejs({}, {}, {ext:'.html'})) .pipe(rename({ extname: ".html" })) .pipe(replace(/[\s\S]*?(<!DOCTYPE)/, "$1")) .pipe(gulp.dest(paths.dist)) .pipe(notify({ title: 'EJSをコンパイルしました。', message: new Date(), sound: 'Tink', })) }) // server gulp.task('browser-sync', () => { return browserSync.init({ server: { baseDir: paths.dist }, port: 4000, reloadOnRestart: true }) }) // reload gulp.task("reload", done => { browserSync.reload() done() }) // clean gulp.task('clean', (done) => { del(paths.dist + '/**/*'); done(); }); // watch gulp.task("watch", done => { gulp.watch(paths.src + "/scss/**/*.scss", gulp.series('sass', 'ejs', 'reload')) gulp.watch(paths.src + "/ejs/**/*.ejs", gulp.series('ejs', 'reload')) done() }) // gulp gulp.task('default', gulp.parallel('watch', 'browser-sync') ) // build gulp.task('build', gulp.series('clean', gulp.series('sass', gulp.series('ejs',))) )