黄兵的个人博客

Gulp用法

gulp 将开发流程中让人痛苦或耗时的任务自动化，从而减少你所浪费的时间、创造更大价值。

具体安装步骤可以参考下面链接。

下面是一个Gulp配置文件：

// instanciando módulos
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');    // Creates source map files (https://www.npmjs.com/package/gulp-sourcemaps/)
var replace = require('gulp-replace-task');     // String replace (https://www.npmjs.com/package/gulp-replace-task/)
var concat = require('gulp-concat');
var clean = require('gulp-clean');

//var watch = require('gulp-watch');
//var gutil = require('gulp-util');

let cleanCSS = require('gulp-clean-css');

gulp.task('clean-css', function () {
    return gulp
        .src(["./wwwroot/css/jp.min.css"], {
            allowEmpty: true
        })
        .pipe(clean())
});

gulp.task('clean-js', function () {
    return gulp
        .src(["./wwwroot/js/jp.min.css"], {
            allowEmpty: true
        })
        .pipe(clean())
});

gulp.task('css', () => {
    return gulp.src([
        "./assets/css/coreui-icons.css",
        "./assets/css/flag-icon.css",
        "./assets/css/font-awesome.min.css",
        "./assets/css/simple-line-icons.css",
        "./assets/css/style.css",
        "./assets/css/custom-style.css",
        "./assets/css/pace.css",
    ])
        .pipe(cleanCSS())
        .pipe(concat('jp.min.css'))
        .pipe(gulp.dest('./wwwroot/css'));
});

gulp.task('scripts-commom', () => {
    return gulp.src([
        "./Assets/js/jquery.min.js",
        "./Assets/js/bootstrap.min.js",
        "./Assets/js/popper.min.js",
        "./Assets/js/pace.min.js",
        "./Assets/js/perfect-scrollbar.min.js",
        "./Assets/js/coreui.min.js",
        "./Assets/js/popper-utils.min.js",
        "./Assets/js/buttons.js",
    ])
        .pipe(concat('jp.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest("./wwwroot/js"));
});

gulp.task('build-app-insights-js',
    function () {
        return gulp
            .src('./node_modules/applicationinsights-js/JavaScript/JavaScriptSDK/snippet.js')
            .pipe(
                replace({                          // Carry out the specified find and replace.
                    patterns: [
                        {
                            // match - The string or regular expression to find.
                            match: 'CDN_PATH',
                            // replacement - The string or function used to make the replacement.
                            replacement: 'https://az416426.vo.msecnd.net/scripts/a/ai.0.js'
                        },
                        {
                            match: 'INSTRUMENTATION_KEY',
                            replacement: '205fabcd-09ee-46f5-bb74-95780fc873da'
                        }
                    ],
                    usePrefix: false
                }))
            .pipe(uglify())                        // Minifies the JavaScript.
            .pipe(concat('app.insights.js'))
            .pipe(gulp.dest('./wwwroot/js'));     // Saves the JavaScript file to the specified destination path.
    });

切换到gulp文件的目录，之后执行gulp css即可将css文件打包成jp.min.css文件。

如果输入gulp scripts-common即可以将所有js文件打包成jp.min.js文件。

参考资料：

1、gulp.js