Web8 [템플릿] gulp-file-include 설치 및 gulp-file 설정 1. 설치 npm install --save-dev gulp-file-include 2. gulpfile.js 설정 const gulp = require("gulp"); const fileinclude = require('gulp-file-include'); gulp.task('fileinclude', function() { return gulp.src([ "./src/html/*", // ★★★★ 불러올 파일의 위치 "!" + "./src/html/include*" // ★★★★ 읽지 않고 패스할 파일의 위치 ]) .pipe(fileinclude({ prefix: '@@', basepath: '@file' })) .pipe(gulp.dest('./dist/html')); // ★★★★ 변환한 파일의 저.. 2021. 1. 9. node.js 새 프로젝트 만들기 (0. node 설치 : nvm 설치방법(window 10)) 1. 원하는 위치에 폴더를 생성한다. 2. visual studio code와 같은 코딩 프로그램으로 해당 폴더를 연다. 3. 터미널을 연다. 4. npm init 실행한다. npm init 5. 패키지 이름, 버전, 설명글 등을 입력하라고 나오는데, 추후 수정가능하므로 Enter로 패스한다. 6. 해당 폴더에 node_modules 폴더와 package-lock.json, package.json 파일이 생성되었다면 설치완료이다. 2021. 1. 9. [파일압축1] gulp-concat : 파일들아 모여라 운영관리를 위해, 작업파일은 여러개의 css(scss), javascript 파일로 나누는 것이 좋지만, web 서버에 여러개 올리는 것은 옳은 선택이라 보기 어렵다. 서버의, 서버에 의한, 서버를 위한 파일 압축 플러그인! gulp-concat의 설명법이다. a.css : body { padding: 0; margin: 0; } b.css : div { width: 200px; height: 200px; margin: 40px auto; } 1. 설치 npm install --save-dev gulp-concat 2. gulpfile 설정 const gulp = require("gulp"); const cleanCss = require("gulp-clean-css"); const concat = req.. 2021. 1. 8. gulp-data : json 데이터 좀 html에 기입해주시겠습니까 1. 설치 npm install --save-dev gulp-data 2. gulpfile.js 설정 2-1: pipe에 직접 데이터 삽입 const gulp = require("gulp"); const nunjucksRender = require("gulp-nunjucks-render"); const data = require('gulp-data'); // ★★★★ gulp-data add gulp.task("nunjucks-html", function(){ return gulp .src("src/html/pages/*") .pipe( // ★★★★ gulp-data add data(function(){ return require("./src/page_data.json") }) ) .pipe (nunj.. 2021. 1. 8. [템플릿] gulp-nunjucks-render : function(if, for, marco) 1. If 문 {% if 값 %} It is true {% endif %} {% if hungry %} I am hungry {% elif tired %} I am tired {% else %} I am good! {% endif %} && → and || → or ! →not {% if happy and hungry %} I am happy *and* hungry; both are true. {% endif %} {% if happy or hungry %} I am either happy *or* hungry; one or the other is true. {% endif %} 2. for 문 {% for 아이템 in 배열 %} {{ 아이템 }} {% endfor %} 2-1. 샘플 {% set nav.. 2021. 1. 7. [템플릿] gulp-nunjucks-render : 기본 사용법 0. 파일트리 ├─dist ├─node_modules ├─src │ ├─html │ │ ├─pages // 각 페이지가 들어갈 폴더 │ │ │ └─home.njk │ │ └─templates // 템플릿이 들어갈 폴더 │ │ └─layout.njk │ ├─img │ ├─scss │ └─js ├─gulpfile.js ├─package-lock.json └─package.json 1. block {% block 블럭명 %} {% endblock %} 템플릿 페이지 내, 각 페이지마다 다르게 들어갈 부분에 위의 태그를 삽입한다. 블럭명은 운영관리를 위해 들어갈 내용의 타이틀을 기입하는 것을 추천한다. layout.njk: {% block content %} {% endblock %} 2. extends {% .. 2021. 1. 7. [템플릿] gulp-nunjucks-render : 설치 및 gulpfile 설정 / 설명 추가 1. 설치 npm install --save-dev gulp-nunjucks-render 정상 설치가 되면, package.json 파일에 다음과 같은 내용이 추가된다. "devDependencies": { "gulp": "^4.0.2", // gulp 필수 ~ "gulp-nunjucks-render": "^2.2.3" }, 다음은 아래 예들을 위한 파일트리이다. ├─dist ├─node_modules ├─src │ ├─html │ │ ├─pages // 각 페이지가 들어갈 폴더 │ │ │ └─home.njk │ │ └─templates // 템플릿이 들어갈 폴더 │ │ └─layout.njk │ ├─img │ ├─scss │ └─js ├─gulpfile.js ├─package-lock.json └─pa.. 2021. 1. 7. gulp 설치 및 .src() .pipe() .dest() / 설명 수정 추가 :( 1. gulp-cli 글로벌 설치(최초 1번만 설치) npm install --global gulp-cli 2. 프로젝트에 gulp 설치 npm install --save-dev gulp 3. gulpfile.js 생성 프로젝트 root에 gulpfile.js를 생성 후, 아래와 같이 설정한다. const gulp = require("gulp"); // ★★★★ gulp 플러그인 사용시 필수 사항 gulp.task('func이름1', function() { return func기능1 }); gulp.task('func이름2', function() { return func기능2 }); gulp.task( "default", gulp.parallel( "func이름1", "func이름2", )); 3-1. .. 2021. 1. 7. 이전 1 다음
