gulp
파일 연결하기

GULP-CONCAT을 사용하여 모든 CSS 파일을 하나에 연결

첫째, 설치 gulp 하고 gulp-concat 및 localY 프로젝트에 플러그인을

 npm install --save-dev gulp gulp-concat

gulp-concat 작업을 gulpfile.js에 추가하십시오.

var gulp = require('gulp');
var concat = require('gulp-concat');

gulp.task('default', function() {
});

gulp.task('css', function() {
    return gulp.src('css/*.css')
        .pipe(concat('concat.css'))
        .pipe(gulp.dest('css/dist'));
});

gulp.task('default', ['css']);

gulp 명령을 시작하면 플러그인 gulp-concat는 css/ 디렉토리에있는 모든 CSS 파일을 가져 와서 하나의 파일 css/dist/concat.css 로 연결합니다

JS 및 CSS 파일 연결 및 Uglify

npm은 모든 파일을 devDependencies에 먼저 설치해야합니다. 예 :

npm install --save-dev gulp gulp-concat gulp-rename gulp-uglify gulp-uglifycss

Gulpfile.js

var gulp = require('gulp');
var gulp_concat = require('gulp-concat');
var gulp_rename = require('gulp-rename');
var gulp_uglify = require('gulp-uglify');
var uglifycss = require('gulp-uglifycss');

var destDir = './public/assets/dist/'; //or any folder inside your public asset folder
var tempDir = './public/assets/temp/'; //any place where you want to store the concatenated, but unuglified/beautified files
//To concat and Uglify All JS files in a particular folder
gulp.task('js-uglify', function(){
    return gulp.src(['./public/js/**/*.js','./public/assets/js/*.js']) //Use wildcards to select all files in a particular folder or be specific
        .pipe(gulp_concat('concat.js')) //this will concat all the files into concat.js
        .pipe(gulp.dest(tempDir)) //this will save concat.js in a temp directory defined above
        .pipe(gulp_rename('uglify.js')) //this will rename concat.js to uglify.js
        .pipe(gulp_uglify()) //this will uglify/minify uglify.js
        .pipe(gulp.dest(destDir)); //this will save uglify.js into destination Directory defined above
});
//To Concat and Uglify all CSS files in a particular folder
gulp.task('css-uglify', function () {
  gulp.src('./public/assets/css/*.css') //Use wildcards to select all files in a particular folder or be specific
  .pipe(gulp_concat('concat.css')) //this will concat all the source files into concat.css
        .pipe(gulp.dest(tempDir)) //this will save concat.css into a temp Directory
        .pipe(gulp_rename('uglify.css')) //this will rename concat.css into uglify.css, but will not replace it yet.
    .pipe(uglifycss({
      "maxLineLen": 80,
      "uglyComments": true
    })) //uglify uglify.css file
    .pipe(gulp.dest(destDir)); //save uglify.css
});

다음 명령으로 실행하십시오.

gulp js-uglify
gulp css-uglify