gulp基本使用指南

================================

gulp 安装及常见问题

1. 安装gulp

    npm install -g gulp

如果报Error: EACCES, open '/Users/xxx/xxx.lock错误。先执行：sudo chown -R $(whoami) $HOME/.npm;

如果使用npm安装插件太慢（被墙），可执行 npm install -g cnpm --registry=https://registry.npm.taobao.org,先安装cnpm, 之后再安装插件时用cnpm安装cnpm install gulp

2. 安装各种插件

    npm install --save gulp            //本地使用gulp

    npm install --save gulp-imagemin   //压缩图片

    npm install --save gulp-minify-css //压缩css

    npm install --save gulp-ruby-sass  //sass

    npm install --save gulp-jshint     //js代码检测

    npm install --save gulp-uglify     //js压缩

    npm install --save gulp-concat     //文件合并

    npm install --save gulp-rename     //文件重命名

    npm install --save png-sprite      //png合并

    npm install --save gulp-htmlmin    //压缩html

    npm install --save gulp-clean      //清空文件夹

    npm install --save browser-sync    //文件修改浏览器自动刷新

    npm install --save gulp-shell      //执行shell命令

    npm install --save gulp-ssh        //操作远程机器

    npm install --save run-sequence    //task顺序执行

或者根据package.json 自动安装。把package.json拷贝到自己的工程目录下，进入目录，执行:npm install

合并、压缩、less编译、实时监控刷新浏览器 案例未优化版

//引入gulp
var gulp = require('gulp');

//引入gulp组价
var minifycss = require('gulp-minify-css'), // CSS压缩
	uglify = require('gulp-uglify'), // js压缩
	concat = require('gulp-concat'), // 合并文件
	rename = require('gulp-rename'), // 重命名
	clean = require('gulp-clean'), //清空文件夹
	minhtml = require('gulp-htmlmin'), //html压缩
	jshint = require('gulp-jshint'), //js代码规范性检查
	imagemin = require('gulp-imagemin'), //图片压缩
	browserSync = require('browser-sync').create(),  //
	less = require('gulp-less'),
    rev     = require("gulp-rev");//MD5版本号





//html压缩
gulp.task('html', function() {
  return gulp.src('src/*.html')
    .pipe(minhtml({collapseWhitespace: true}))
    .pipe(gulp.dest('dist'));
});


gulp.task('less', function() {
  gulp.src('src/less/*.less')
    .pipe(less())
    .pipe(gulp.dest('dist/css'))
    .pipe(livereload());
});

//压缩css
gulp.task('css', function(argument) {
	gulp.src('src/css/*.css')
		.pipe(concat('ab.css'))  //取名用各个名字合并
		.pipe(rename({         //修改后缀名
			suffix:'.min'
		}))
		.pipe(minifycss())   //css压缩
		.pipe(gulp.dest('dist/css/'));   //输出路劲
		console.log('css 完毕');
});

//压缩js
gulp.task('js', function(argument) {
	gulp.src('src/js/*.js')
		.pipe(jshint())   // 进行检查
		.pipe(jshint.reporter('default'))  // 对代码进行报错提示
		//.pipe(jshint.reporter(stylish))   //错误高亮提示
		//.pipe(jshint.reporter('fail'));
		.pipe(concat('merge.js'))
		.pipe(rename({
			suffix: '.min'
		}))
		.pipe(uglify())
		.pipe(gulp.dest('dist/js/'));
});

//压缩图片
gulp.task('img', function(argument){
	//gulp.src('src/img/*.{png,jpg,gif,ico}')
	gulp.src('src/imgs/*')
        .pipe(imagemin({
        	optimizationLevel:7
        }))
        // .pipe(imagemin({
        //     optimizationLevel: 5, //类型：Number  默认：3  取值范围：0-7（优化等级）
        //     progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
        //     interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染
        //     multipass: true //类型：Boolean 默认：false 多次优化svg直到完全优化
        // }))
        .pipe(gulp.dest('dist/imgs'));
});

//清空dist构建文件夹
gulp.task('clear', function(){
	gulp.src('dist/*',{read: false})
		.pipe(clean());
});


// 监听任务
gulp.task('watch', function() {

    // 建立浏览器自动刷新服务器
    browserSync.init({
        server: {
            baseDir: "src"
        }
    });

    // 自动刷新
    gulp.watch('src/**', function() {
        browserSync.reload();
    });

});


//添加版本号  错误的
// gulp.task('revCss', function () {
//     return gulp.src('src/css/*.css' )
//         .pipe(rev())
//         .pipe(rev.manifest())
//         .pipe(gulp.dest('dist1/css/'));
// });


gulp.task('default',['html','css']);