gulp打包工具

首先安裝全局gulp

$ npm install --global gulp

 

下載成功後

新建一個項目或者一個文件夾（作測試）

mkdir testgulp

 

在該文件或者項目下下載gulp工具

$ npm install --save-dev gulp  //  yarn add gulp --save-dev

 

出現這樣的代碼就表示文件tetsgulp裏面下載成功 

再在項目的根目錄下新建一個js文件gulpfile.js

 

在js 文件 引入 gulp 

var gulp = require('gulp');

　　再壓縮你要壓縮的文件的文檔

一下是js和css文件壓縮的例子

var gulp = require("gulp");
var uglify = require('gulp-uglify');

gulp.task('gmc', function () {
// gulp.src(['js/*.js','!js/*.min.js']) //獲取文件，同時過濾掉.min.js文件
gulp.src('*.js') //獲取文件，同時過濾掉.min.js文件
.pipe(uglify())
.pipe(gulp.dest('js/')); //輸出文件
});

var minify = require('gulp-minify-css');

gulp.task('cssmini', function () {
gulp.src('*.css') //要壓縮的css
.pipe(minify())
.pipe(gulp.dest('css/'));
});

 接下來在node.js跑

下面還有自動化壓縮(監聽)

var gulp = require("gulp");
var uglify = require('gulp-uglify');


gulp.task('gmc', function () {
//  gulp.src(['js/*.js','!js/*.min.js'])  //獲取文件，同時過濾掉.min.js文件
    gulp.src('*.js')  //獲取文件，同時過濾掉.min.js文件
        .pipe(uglify())
        .pipe(gulp.dest('js/'));  //輸出文件
});

var minify = require('gulp-minify-css');

gulp.task('cssmini', function () {
    gulp.src('*.css')  //要壓縮的css
        .pipe(minify())
        .pipe(gulp.dest('css/'));
});

gulp.task("watchjs",function(){ gulp.watch('*.js', ['gmc']); gulp.watch('*.css', ['cssmini']); });

 

附加連接：gulp自動化工具大全https://www.jianshu.com/p/98db023b5b89