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
原文地址:https://www.cnblogs.com/clj9291/p/10025583.html