반응형 gulp6 gulp setting 초기 화면 1. node.js깔기 2. 걸프파일 설치npm install gulp browser-sync gulp-clean-css gulp-data gulp-dart-sass gulp-imagemin gulp-nunjucks-render gulp-uglify image-size nunjucks --save-dev설치하면 노드모듈 생김 (다른곳에서 파일 받을때 package.json파일만 저장해서 npm install 하면됨) 2024. 10. 27. gulp image guide sample page npm install gulp gulp-data gulp-nunjucks-render gulp-sass image-size --save-dev gulp-data (이미지 파일이름)gulp-nunjucks-render (이미지 취합)image-size (이미지 가로 세로 크기) 2024. 10. 26. spritesmith hover https://github.com/twolfson/gulp.spritesmith/issues/18 cssOpts: { cssClass: function (item) { // If this is a hover sprite, name it as a hover one (e.g. 'home-hover' -> 'home:hover') if (item.name.indexOf('-hover') !== -1) { return '.sprite-' + item.name.replace('-hover', ':hover'); // Otherwise, use the name as the selector (e.g. 'home' -> 'home') } else { return '.sprite-' + item.name; } } } s.. 2017. 2. 17. gulp-html-tag-include https://github.com/zaharin/gulp-html-tag-include 1234567var include = require('gulp-html-tag-include'); gulp.task('html-include', function() { return gulp.src('src/html/**/*.html')//작업용 .pipe(include()) .pipe(gulp.dest('dist/html/'));//배포용});Colored by Color Scriptercs @@title 2016. 12. 5. gulp.spritesmith 스프라이트이미지 https://bunlog.d-s-b.jp/optimize-gulpfile-for-gulp-spritesmith스프라이트 폴더별로 https://github.com/twolfson/gulp.spritesmith/issues/18걸프이미지호버했을때 스프라이트이미지 스프라이트 이미지 한개일때123456789101112131415 gulp.task('sprite', function() { var spriteData = gulp.src('./src/img/*.*') .pipe(spritesmith({ imgName: '_sprite.png', cssName: '_sprite.scss', algorithm: 'top-down', padding:10, cssTemplate: 'sprite.css.handlebars.. 2016. 9. 28. 사스로 벤더프리픽스 // config.sass.src = 'theme/assets/src/scss/**/*.{scss,sass}' // config.sass.dest = 'theme/assets/css/" gulp.task('styles', ['clean:styles'], function () { // Prevent reading sourcemaps to autoprefix them or make sourcemaps of sourcemaps var filter = gulpFilter(['*.css', '!*.map']); return gulp.src(config.sass.src) .pipe(plumber()) .pipe(sourcemaps.init()) .pipe(sass({ errLogToConsole: true })) .. 2016. 9. 26. 이전 1 다음 반응형
