본문 바로가기

javascript/gulp16

[템플릿] gulp-ejs : 사용법 1. 혹, 아래와 같이 변수 지정 여부로 분기 처리가 되어있은데, false로 값을 넘기고 싶을 때엔, 따로 변수를 기입하지 않아도 된다(예: ). 단, 하이픈(-)은 반드시 있어야 한다, if ( ON ) { is On } else { is Off } 2. : 변수값 삽입용 + 와 의 경우 줄바뀜이 있으면, 오류가 난다. 반드시, '%>' 닫힘 태그 삽입이 필요하다. var a = = 1 위처럼 'var 변수명 = '과 같이 사용 가능한데, 비추천한다. 자바스크립트 코드를 담을 땐 를 사용하고 변수값을 담을 땐 를 사용하는 식으로, 완전한 분리 사용을 해야, 추후 관리에 용이하다. 3. : 자바스크립트 코드 삽입용 gulp-ejs에서는 을 이용하여 자바스크립트를 내장할 수 있다. 다만, 위의 글처럼 는.. 2021. 1. 9.
[템플릿] gulp-ejs : 설치 및 gulpfile.js 설정 1. 설치 npm install --save-dev gulp-ejs 2. gulpfiles.js 설정 const gulp = require("gulp"); const ejs = require("gulp-ejs"); gulp.task('gulpEjs', function() { return gulp .src("./src/html/*") .pipe(ejs()) .pipe(gulp.dest("./dist/html")) }); gulp.task( "default", gulp.parallel("gulpEjs") ); 2021/01/07 - [web/gulp] - gulp 설치 및 .src() .pipe() .dest() / 설명 수정 추가 :( 2021/01/09 - [web/gulp] - [템플릿] gulp-ej.. 2021. 1. 9.
[템플릿] gulp-file-include 사용법 1. @@include('템플릿 파일 위치') @@include('템플릿 파일 위치') @@include('파일위치', { 변수명 : 변수값 }) 2. @@var : 변수값 삽입용 @@변수명 3. @@if : 오직 if만 존재 @@if (변수 === 변수값){ 결과물 } 4. @@for @@include('템플릿 파일 위치', { 배열이름 : [아이템1, 아이템2, 아이템3] }) @@for (var i = 0; i html > index.html: @@include('./include/content.html') src > html > about-gulp-file-include.html: @@include('./inclu.. 2021. 1. 9.
[템플릿] 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.
[로컬 테스트 서버] browser-sync + gulp-sass : scss 수정하고 바로 확인하자 모바일 프로젝트는 웬만한 모든 게 정상작동하기 때문에 큰 문제가 없는데, pc/반응형 web 작업의 경우, 우리의 못난이 익스플로러. 그 못난이 덕분에 크로스 브라우징 확인이라는 조금의 수고가 필요하다. 이에 대한 수고를 덜어주는 플러그인이 browser-sync + gulp-sass 조합이다. 마치 비쥬얼 스튜티오의 live server + live sass compiler 같은 조합으로, browser-sync은 로컬 서버를 생성하고, gulp-sass는 scss를 css로 컴파일하는 플러그인인데, 이 gulp-sass에 browser-sync를 연결해두면, scss 수정과 동시에 서버에 업데이트를 해줘, 새로고침 없이 바로 서버에서 확인 가능하다. 그럼 먼저 browser-sync를 설치해보자. 1.. 2021. 1. 8.
[css 초기화] gulp-sass + node-normalize-scss 1. 설치 npm install node-normalize-scss@3.0.0 2. gulpfile.js 설정 const sass = require('gulp-sass'); const sourcemaps = require('gulp-sourcemaps'); const Fiber = require('fibers'); const dartSass = require('dart-sass'); const autoprefixer = require('autoprefixer'); const postcss = require('gulp-postcss'); const apfBrwsowsers = [ 'ie >= 8', ]; gulp.task('sass', function(){ const options = { sass : { .. 2021. 1. 8.
[gulp-sass] (dart) sass를 위한 gulp 플러그인 설치 및 설정 2 이제, 브라우져 버전에 맞춰 css 컴파일해보자. 1. 설치 npm install --save-dev gulp-postcss autoprefixer@9.8.5 2. gulpfile.js 설정 const sass = require('gulp-sass'); const sourcemaps = require('gulp-sourcemaps'); const Fiber = require('fibers'); const dartSass = require('dart-sass'); const autoprefixer = require('autoprefixer'); // ★★★★ 고려할 브라우저 버전 설정 const postcss = require('gulp-postcss'); // ★★★★ 위 브라우저에 맞춰 css 컴파일 .. 2021. 1. 8.
[gulp-sass] (dart) sass를 위한 gulp 플러그인 설치 및 설정 1 사스(sass), 비쥬얼스튜디오를 사용하면 Live Sass Compiler를 이용해 쉽고 간단하게 사용할 수 있지만, 공동작업이 많은 개발환경의 특성상, 다른 작업자분들의 환경을 고려하지 않을 수 없다. 그래서 찾은 방법이 gulp-sass이다. gulp에 연결해두면, 타 환경에서도 npm만 돌리면 되기에 gulp-sass 설치를 추천한다. 다음은 dart sass를 사용하기 위한 설정 방법인데, 자세히 적기엔 너무 많아서 그러하지 못하였고, 어떤 플러그인을 설치해야하는지, 각 플러그인이 어떤 용도인지 정도만 기입하였다. 그럼 오늘도 즐거운 코딩! 1. 설치 npm install --save-dev gulp-sass gulp-sourcemaps fibers dart-sass 2. gulpfile.js .. 2021. 1. 8.
[파일압축2] gulp-clean-css : 넌 거리두기 하지마(minify) css는 경량화한다 해도 읽히는 속도차가 크지 않아, 경량화작업을 하시는 분도 계시고 안하시는 분도 계신다. 필자의 경우, 서버용이니 아주 조금이라도 빨리 읽히게 하기 위해, 또, '코드 도둑들, 조금이라도 귀찮게 해 주겠어!!' 마인드로 경량화를 돌리는 편이다(물론 경량화를 다시 정렬해주는 사이트도 많고 플러그인도 많다). src > css > a.css : body { padding: 0; margin: 0; } src > css > b.css : div { width: 200px; height: 200px; margin: 40px auto; } 1. 설치 npm install --save-dev gulp-clean-css 2. gulpfile.js 설정 const gulp = require("gul.. 2021. 1. 8.
[파일압축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.
[코드정렬] pretty, through2 : 소스코드야 줄서자 예로, 아래 코드를 gulp 돌리면, 의미없는 공백들과 제멋대로인 정렬로 소스가 못생겨진다. pretty + through2 은, 동료에게 '정렬이 왜 이따구인거죠?' 말을 안듣기 위한 플러그인이랄까? {% set navigation = [ { 'name': '1' , 'url': '1.html' }, { 'name': '2' , 'url': '2.html' }, { 'name': '3' , 'url': '3.html' } ] %} {% extends "../templates/layout.njk" %} {% block content %} {% for item in navigation %} {{item.name}} {{item.name}} {% endfor %} {% endblock %} 1 1 2 2 3.. 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.

티스토리툴바