🎁 Module bundler/🥤 Gulp 검색 결과

해당 글 6건

🥤 gulp 사용하기 (5) gh pages로 deploy

https://www.npmjs.com/package/gulp-gh-pages gulp-gh-pages gulp plugin to publish contents to Github pages www.npmjs.com 너무 간단해서 적을게 없다. 주의사항은, 완성했다고 허겁지겁 배포하면 탈이 난다는 것이다. dev, build, deploy를 먼저 잘 구성하고, 실험삼아 dev를 한번 더 돌려보고, 이후에 deploy하자. import ghPages from "gulp-gh-pages"; const deployGhPages = () => gulp.src("build/**/*").pipe(ghPages()); // for build export const build = gulp.series([prepare, ..
🎁 Module bundler/🥤 Gulp 2020. 6. 19. 22:00

🥤 gulp 사용하기 (4) babelify와 Browserify의 개념과 gulp-bro를 통한 활용

babelify는 ES6 이상의 JS 문법을 트랜스파일해주는 바벨을 브라우저가 알아들을 수 있는 방식으로 바꿔주는 것이다. 간단~ 반면 browserify는 CommonJS 형태로 정의된 의존성 파일(dependencies) 들을 브라우저 내에서 사용할 수 있도록 번들링을 할 수 있게 해주는 도구이다. CommonJS 형태는 Node에서 채택한 방식이므로 위키피디아에서는 다음과 같이 설명하고 있다. Browserify is an open-source JavaScript tool that allows developers to write Node.js-style modules that compile for use in the browser. CommonJS건 AMD건 결국 모듈을 불러오고 내보내는 코드가 중..
🎁 Module bundler/🥤 Gulp 2020. 6. 19. 20:52

🥤 gulp 사용하기 (3) sass 트랜스파일 및 + Autoprefixer + minify

🥤 sass transpile https://www.npmjs.com/package/gulp-sass sass는 위 npm에서 설명한대로 코딩하면 된다. import gulp from "gulp"; import gulppug from "gulp-pug"; import del from "del"; import ws from "gulp-webserver"; import gulpimage from "gulp-image"; import sass from "gulp-sass"; sass.compiler = require("node-sass"); const routes = { scss: { watch: "src/scss/*", src: "src/scss/styles.scss", dest: "build/css", }..
🎁 Module bundler/🥤 Gulp 2020. 6. 19. 19:43

🥤 gulp 사용하기 (3) Image Optimization

gulp-image Optimize PNG, JPG, GIF, SVG images with gulp task. www.npmjs.com 공식 문서를 보면 이미지 압축에 대한 옵션이 많은 것을 볼 수 있다. 원하는 대로 설정하자. const gulp = require('gulp'); const image = require('gulp-image'); gulp.task('image', () => { gulp.src('./fixtures/*') .pipe(image({ pngquant: true, optipng: false, zopflipng: true, jpegRecompress: false, mozjpeg: true, gifsicle: true, svgo: true, concurrent: 10, quiet:..
🎁 Module bundler/🥤 Gulp 2020. 6. 19. 17:21

🥤 gulp 사용하기 (2) gulp-webserver와 watch()를 통한 자동화

watch를 통해 파일에 변화 사항이 있을 경우 감지하고 자동으로 build한 후 webserver를 켜보도록 하자. nodemon의 gulp 버전이다. (https://www.npmjs.com/package/gulp-webserver) (https://gulpjs.com/docs/en/api/watch) (https://gulpjs.com/docs/en/api/parallel) 각 문서에 이미 자세히 설명이 되어 있다. 주의할 점은 보통 series는 순차적으로 실행하는 반면 parallel은 simultaneously 하게 실행한다. Combines task functions and/or composed operations into larger operations that will be execute..
🎁 Module bundler/🥤 Gulp 2020. 6. 19. 16:58

🥤 gulp 사용하기 (1) 기초 및 pug 트랜스파일

gulp.js Individual backers Since 2013, gulp has been the toolkit of choice for developers and designers alike. Not only do we have communities who’ve relied on us since the beginning, but there’s also a constant flow of new users who find out how great their w gulpjs.com 문서가 굉장히 짧아서 금방 읽습니다. 참고하면 좋은 포스트) (http://jeonghwan-kim.github.io/tool/2017/09/16/gulp-workflow-for-frentend-development.html)..
🎁 Module bundler/🥤 Gulp 2020. 6. 19. 00:53