기본 동작 원리
1. 프로젝트 폴더에서 걸프를 설치한다.
npm install gulp --save-dev
2. gulpfile.js 파일을 생성해서 아래와 같이 작성한다.
var gulp = require('gulp');
gulp.task('task-name', function() {
// ①
});
터미널에서 gulp task-name을 입력하면 ①이 실행된다.
SASS를 CSS로 바꾸는 방법
1. gulp-sass를 설치한다.
npm install gulp-sass --save-dev
2. gulpfile.js에 다음을 입력한다.
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function() {
return gulp.src('app/scss/styles.scss') // 이 경로의 style.scss 파일을 가져와서
.pipe(sass()) // sass를 css로 변경하고
.pipe(gulp.dest('app/css')) // app/css 폴더에 저장한다.
});
여러 파일을 일괄적으로 처리하는 방법
1. gulpfile.js에 다음을 입력한다.
gulp.task('sass', function() {
return gulp.src('app/scss/**/*.scss') // scss 폴더 안에 있는 모든 자손 파일들을 가져온다.
.pipe(sass())
.pipe(gulp.dest('app/css')) // app/css 폴더에 각각의 css 파일들이 생성된다.
})
빨강대신 아래의 string을 넣을 수 있다.
*.scss // 현 위치 폴더의 모든 것을 가리키는 것으로 .scss 파일을 다 가져온다.
**/*.scss // 현 위치 폴더 뿐만 아니라 자손 모두를 가리킨다.
!not-me.scss // not-me.scss는 제외한다.
*.+(scss|sass) // 현 위치 폴더의 .scss 파일과 .sass 파일을 가리킨다. (+와 괄호를 써서 다양하게 활용할 수 있다.)
파일을 저장할 때마다 무언가를 하고 싶을 때
gulp.task('watch', function() {
gulp.watch('app/scss/**/*.scss', ['sass']); // 해당 파일을 저장할 때 sass를 호출한다.
// Other watchers
})
터미널에 gulp watch를 입력하면 걸프가 app/scss/**/*.scss를 지켜보게 되고
해당 경로의 .scss 파일이 저장될 때마다 위의 sass 태스크를 호출하게 된다.
여기에 브라우저까지 리로딩하고 싶을 때
1. browser-sync를 설치한다.
npm install browser-sync --save-dev
2. gulpfile.js에 다음을 입력한다.
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
gulp.task('browserSync', function() {
browserSync.init({
server: {
baseDir: 'app' // 서버를 열 때 어디가 루트 경로인지를 알려줘야 한다.
},
})
})
gulp.task('sass', function() {
return gulp.src('app/scss/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('app/css'))
.pipe(browserSync.reload({ // 서버가 리로딩 된다.
stream: true
}))
});
// browserSync와 sass가 호출된 이후에 watch가 있는 함수가 실행된다.
gulp.task('watch', ['browserSync', 'sass'], function() {
gulp.watch('app/scss/**/*.scss', ['sass']);
// Other watchers
});
터미널에 gulp watch 명령어를 입력하면 scss 파일을 저장할 때마다 서버가 가동된 웹페이지가 바뀐다.
html 파일과 js 파일도 추가하면 다음과 같다.
gulp.task('watch', ['browserSync', 'sass'], function() {
gulp.watch('app/scss/**/*.scss', ['sass']);
// Reloads the browser whenever HTML or JS files change
gulp.watch('app/*.html', browserSync.reload);
gulp.watch('app/js/**/*.js', browserSync.reload);
});
순서대로 묶어주는 방법
1. html을 다음과 같이 작성한다.
<!--build:js js/main.min.js -->
<script src="js/1.js"></script>
<script src="js/2.js"></script>
<!-- endbuild -->
js는 타입이고 js/main.min.js는 생성될 파일의 경로를 지정해준 거다.
2. gulp-useref를 설치한다.
npm install gulp-useref --save-dev
3. gulpfile.js에 다음을 입력한다.
var useref = require('gulp-useref');
gulp.task('useref', function() {
return gulp.src('app/*.html')
.pipe(useref())
.pipe(gulp.dest('dist'))
});
터미널에 gulp useref를 입력하면 dist 폴더에 순서가 적용된 main.min.js 파일이 생성된다.