gulp安装：

1.在系统安装：npm install gulp-cli -g

2.在文件中安装：

npm init -y 安装后出现json文件

npm install -save-dev gulp gulp-util 安装后出现node_modules文件夹

创建gulpfile.js文件并写入

var gulp = require('gulp');

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

         // 写自己的代码

    });

输入gulp命令看是否安装成功

 

 

gulp使用

 

html文件压缩

 

命令：npm install --save-dev gulp-minify-html

 

样例：  var gulp = require('gulp'),

minifyHtml = require("gulp-minify-html");

gulp.task('myminifyhtml', function () {

          gulp.src('*.html') // 要压缩的html文件

         .pipe(minifyHtml()) //压缩

         .pipe(gulp.dest('dist/html'));//压缩到哪

         .pipe(connect.reload());

});

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

 

 

css文件压缩

命令：npm install gulp-minify-css --save-dev

      npm install --save-devgulp-clean-oss

 

样例： var gulp = require('gulp'),

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

gulp.task('myminifycss', function () {

          gulp.src('css/*.css')

              .pipe(cssmin())

              .pipe(gulp.dest('dist/css'));

             .pipe(connect.reload());

});

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

 

 

js文件合并压缩插件

命令：npm install --save-dev gulp-uglify gulp-concat

 

     样例： var gulp = require('gulp'),

            uglify=require('gulp-uglify'),

             concat=require('gulp-concat');

       gulp.task('myjs', function(){

         gulp.src('js/*.js')

             .pipe(uglify())

            .pipe(concat('all.js'))

             .pipe(gulp.dest('dist/myjs'));

            .pipe(connect.reload());

        });

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

重命名

命令：npm install --save-dev gulp-rename

 

样例： rename = require('gulp-rename')

gulp.task('minify-html', function () {

          gulp.src('*.html') // 要压缩的html文件

              .pipe(minifyHtml()) //压缩

              .pipe(rename('a.html'))

              .pipe(gulp.dest('dist/html'));

});

 

 

自动监听自动刷新

命令：npm install --save-dev gulp-livereload

      npm install --save-dev gulp-connect

 

     样例： connect = require('gulp-connect');

     livereload = require('gulp-livereload');

//自动监听

gulp.task('watch', function () {

     gulp.watch('*.html', ['myminifyhtml']);

     gulp.watch('js/*.js', ['myjs']);

     gulp.watch('css/*.css', ['myminifycss']);

});

//设置刷新服务

gulp.task('connect', function () {

     connect.server({

         host: 'localhost', //地址，可不写，不写的话，默认localhost

         port: 8020, //端口号，可不写，默认8000

         root: './', //当前项目主目录

         livereload: true //自动刷新

     });

});

gulp.task('default',['watch','connect']);

 

 

具体代码参考以下

 

// 定义依赖项和插件

var gulp=require('gulp'),

     gutil=require('gulp-util'),

     uglify=require('gulp-uglify'),

     cssmin = require('gulp-minify-css'),

     minifyHtml = require("gulp-minify-html"),

     rename = require('gulp-rename'),

     connect = require('gulp-connect');

     livereload = require('gulp-livereload');

 

// 定义名为 "js"的任务

gulp.task('uglifyjs', function(){

     gulp.src('js/*.js')

         .pipe(uglify())

         .pipe(gulp.dest('dist/js'))

     .pipe(connect.reload());

 

});

gulp.task('testCssmin', function () {

     gulp.src('css/index1.css')

         .pipe(cssmin())

         .pipe(rename('aaaa.css'))

         .pipe(gulp.dest('dist/css'))

     .pipe(connect.reload());

 

});

gulp.task('minify-html', function () {

     gulp.src('*.html') // 要压缩的html文件

         .pipe(minifyHtml()) //压缩

         .pipe(gulp.dest('dist/html'))

     .pipe(connect.reload());

 

});

//自动监听

gulp.task('watch', function () {

     gulp.watch('*.html', ['minify-html']);

     gulp.watch('js/*.js', ['uglifyjs']);

     gulp.watch('css/*.css', ['testCssmin']);

});

//设置刷新服务

gulp.task('connect', function () {

     connect.server({

         host: 'localhost', //地址，可不写，不写的话，默认localhost

         port: 8020, //端口号，可不写，默认8000

         root: './', //当前项目主目录

         livereload: true //自动刷新

     });

});

// 定义默认任务

gulp.task('default', ['uglifyjs','testCssmin','minify-html','watch','connect']);