gulp整理

1. 安装nodejs

去 https://nodejs.org/en/下载安装文件安装即可。

2. 设置npm

3. 安装gulp(全局)   在终端输入npm install gulp -g

4. 配置项目

• 用npm init建

• 也可以复制之前项目的创建好的package.json

5.本地安装gulp（npm install gulp --save-dev）及gulp插件

/*引入gulp及相关插件 require('node_modules里对应模块')*/

var gulp = require('gulp');  //基础库
var minifyCss = require("gulp-minify-css");    //css压缩      Install:npm install --save-dev gulp-minify-css
var uglify = require('gulp-uglify');           //js压缩       Install:npm install --save-dev gulp-uglify
var concat = require('gulp-concat');           //合并js文件   Install:npm install --save-dev gulp-concat
var imagemin = require('gulp-imagemin');       //图片压缩     Install:npm install --save-dev gulp-imagemin
var htmlmin = require('gulp-htmlmin');         //压缩html     Install:npm install --save-dev gulp-htmlmin
var livereload = require('gulp-livereload');   //自动刷新页面 Install:npm install --save-dev gulp-livereload




//压缩css
gulp.task('minify-css', function () {
    gulp.src('css/*.css')
        .pipe(minifyCss())
        .pipe(gulp.dest('dist/css'));
});
//压缩script
gulp.task('script', function () {
    gulp.src('js/*.js')
      //.pipe(concat('all.js'))  将所有js文件合并成一个文件
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'));
});
//压缩images
gulp.task('imagemin', function () {
        gulp.src('images/*.{png,jpg,gif,ico}')
       .pipe(imagemin())
       .pipe(gulp.dest('dist/images'));
});
//html压缩
    var options = {
        removeComments: true, //清除HTML注释
        collapseWhitespace: true, //压缩HTML
        collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true, //删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css"
        minifyJS: true, //压缩页面JS
        minifyCSS: true//压缩页面CSS
    };
   gulp.task('htmlmin', function () {   
        gulp.src('cp/*.html')
       .pipe(htmlmin(options))
       .pipe(gulp.dest('dist/cp'))
       .pipe(livereload());
   });
    gulp.task('htmlmin-nav', function () {
        gulp.src('nav/*.html')
       .pipe(htmlmin(options))
       .pipe(gulp.dest('dist/nav'))
       //.pipe(livereload());
    });



//监听文件变化自动压缩
    gulp.task('watch', function () {
        livereload.listen();
        gulp.watch('css/*.css', ['minify-css']);
        gulp.watch('js/*.js', ['script']);
        gulp.watch('images/*', ['imagemin']);
        gulp.watch('cp/*.html', ['htmlmin']);
        gulp.watch('nav/*.html', ['htmlmin-nav']);
})


//项目根目录里执行gulp指令，default任务被执行
gulp.task('default', ['watch']);