gulp配置

gulp是基于Nodejs的自动任务运行器， 它能自动化地完成 css/image/javascript/sass/html 等文件的的压缩、格式化、合并、部署文件生成、测试、检查、浏览器自动刷新，并监听文件在改动后重复指定的这些步骤。我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率

安装
1 gulp基于Nodejs，先安装Nodejs

node -v

2 全局安装gulp，并通过命令行检测gulp是否安装成功：

npm install gulp -g

通过命令行检测gulp是否安装成功

gulp -v

配置
如果是已存在项目，找到package.json所在的当前路径，打开当前路径命令行窗口，安装node依赖包：

npm install

安装完成之后，执行项目：

gulp xxx

如果是新项目需求，参考以下配置流程
1 新建package.json文件
package.json是基于nodejs项目必不可少的配置文件，存放在项目根目录下（也可以是项目子目录下）。其中配置了需要运用的基础插件：

{
  "name": "xxx",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "xxx",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1", 
    "gulp-imagemin": "^3.2.0",
    "gulp-rename": "^1.2.2",
    "gulp-ruby-sass": "^2.1.1", //不推荐使用
    "node-sass": "^4.11.0", // 推荐使用gulp-sass
    "gulp-sass": "^4.0.2",
    "gulp-uglify": "^2.1.2",
    "gulp-cache": "^0.4.6",
    "gulp-less": "^3.0.0",
    "less-plugin-autoprefix": "^2.0.0"
  }
}

2 新建gulpfile.js文件

var gulp = require('gulp'),
    // sass = require('gulp-ruby-sass'), //sass编译
    sass = require('gulp-sass'),
    uglify= require('gulp-uglify'), //js压缩
    rename = require('gulp-rename'), //文件重命名
    imagemin = require('gulp-imagemin'), //图片压缩
    cache = require('gulp-cache'); //缓存
// 静态资源路径，根据各自项目实际情况调整
var devRoot = 'dev/',
    distRoot = 'dist/';
var devPath = {
    css : devRoot + 'scss/',
    js : devRoot + 'js/',
    images : devRoot + 'images/',
    pic : devRoot + 'pic/',
    less: devRoot + 'less/'
};
var distPath = {
    css : distRoot + 'css/',
    js : distRoot + 'js/',
    images : distRoot + 'images/',
    pic : distRoot + 'pic/'
};
// gulp-ruby-sass生成压缩
// gulp.task('sass', function () {
//     sass(devPath.css + '**/*.scss', {
//             style:'compressed'
//         })
//     .pipe(gulp.dest(distPath.css));
// });
// gulp-ruby-sass生成未压缩
// gulp.task('cssfull', function () {
//     sass(devPath.css + '**/*.scss', {
//             style:'compact'
//         })
//     .pipe(rename({suffix:'.full'}))
//     .pipe(gulp.dest(distPath.css));
// });

gulp.task('sass', function () {
    const sassConfig = {
        outputStyle: 'compact' //'compressed'为压缩css,'compact'为横排css；不设置sassConfig为标准格式化css
    };
    return gulp.src(devPath.css + '**/*.scss')
        .pipe(sass(sassConfig).on('error', sass.logError))
        .pipe(gulp.dest(distPath.css));
});
// less编译成css
gulp.task('less', function () {
    var LessAutoprefix = require('less-plugin-autoprefix');
    var autoprefix = new LessAutoprefix({ browsers: ['last 2 versions'] });
    gulp.src(devPath.less + '**/*.less') 
    .pipe(less({
        plugins: [autoprefix]
    })) 
    .pipe(gulp.dest(distPath.css));
});
// js压缩
gulp.task('jsmin', function () {
    gulp.src(devPath.js+'**/*.js')
    .pipe(uglify())
    .pipe(rename({suffix:'.min'}))
    .pipe(gulp.dest(distPath.js));
});
// 样式图片压缩
gulp.task('imagemin', function () {
    gulp.src(devPath.images + '/**/*')
        .pipe(cache(imagemin({
            progressive: true
        })))
        .pipe(gulp.dest(distPath.images));
});
// 数据图片压缩
gulp.task('picmin', function () {
    gulp.src(devPath.pic + '/**/*')
        .pipe(cache(imagemin({
            progressive: true
        })))
        .pipe(gulp.dest(distPath.pic));
});
// 实时监听
gulp.task('watch', ['sass','jsmin','imagemin','picmin','less'],function () {
    gulp.watch(devPath.css + '**/*.scss', ['sass']);
    gulp.watch(devPath.less + '**/*.less', ['less']);
    gulp.watch(devPath.js + '**/*.js', ['jsmin']);
    gulp.watch(devPath.images + '**/*', ['imagemin']);
    gulp.watch(devPath.pic + '**/*', ['picmin']);
});
// gulp任务
gulp.task('default',['watch']);