gulp安装

1.在系统安装(全局安装)：

      npm install gulp-cli -g

2.在文件中安装：

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

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

3.创建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') //要压缩的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') //要合并压缩的js文件

                    .pipe(uglify()) //调用压缩

                    .pipe(concat('all.js')) //合并所有js文件

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

                    .pipe(connect.reload()); //时时监听

           });

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

自动监听自动刷新

命令：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']);