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

巴特西

gulp打包工具

最新文章

热门文章