gulp使用

一、编译less
1.命令行安装插件
cnpm i gulp-less --save-dev
2.打开根目录下的gulpfile.js文件，引入gulp-less

var less = require("gulp-less");

3.定义任务

gulp.task("lessc",function () { //定义一个任务 名字为lessc（自定义）
    return gulp.src("css/*.less") //指定源文件路径 *全部
        .pipe(less()) //调用管道
        .pipe(gulp.dest("dist")); //指定输出路径

});

4.如果需要添加监听的话，需在该任务后面另外定义一个监听任务

gulp.task("watchLess", function () {
    return gulp.watch("css/*.less",
        ["lessc"]);
});

二、编译scss
1.安装插件

cnpm i gulp-sass --save-dev
2.打开根目录下的gulpfile.js文件，引入gulp-sass

var sass = require("gulp-sass");

3.定义任务编译scss

gulp.task("sassc",function () {
    return gulp.src("css/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("dist"));

});

4.监听

gulp.task("watchSass", function () {
    return gulp.watch("css/*.scss",
        ["sassc"]);
});

三、压缩单个css
1.安装插件
cnpm i gulp-clean-css --save-dev
2.引入

var minCss = require('gulp-clean-css');

3.压缩

gulp.task("minCss",function () {
    gulp.src("dist/!*css")
        .pipe(minCss())
        .pipe(rename({suffix:'.min'}))
        .pipe(gulp.dest("min/css"))
});

四、合并css
1.安装
cnpm i gulp-concat --save-dev
2.引入

var concat = require("gulp-concat");

3.合并

gulp.task("Concat",function () {
    return gulp.src("min/css/!*.css")
        .pipe(concat('all.min.css'))//合并所有的.min.css
        .pipe(gulp.dest("all/css"));

});

五、压缩JS
1.安装插件
cnpm i gulp-uglify --save-dev
2.引入

var uglify = require("gulp-uglify");

3.压缩

gulp.task('minJs', function () {
    return gulp.src("js/*.js")
        .pipe(uglify())
        .pipe(rename({suffix: '.min'}))
        .pipe(concat("all.min.js"))
        .pipe(gulp.dest('all/jsmin'));
});

六、压缩图片
1.安装

cnpm i gulp-imagemin --save-dev
2.引入

var imagemin = require("gulp-imagemin");

3.压缩

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

});

七、雪碧图
1.安装
cnpm i gulp.spritesmith --save-dev
2.引入

var spritesmith = require("gulp.spritesmith");

gulp.task('imageconcat', function () {
    return gulp.src('dist/img/*.{jpg,png}')//需要合并的图片地址
        .pipe(spritesmith({
            imgName: 'sprite.png',//保存合并后图片的地址
            cssName: 'css/sprite.css',//保存合并后对于css样式的地址
            padding:5,//合并时两个图片的间距
            algorithm: 'top-down'//注释1
            // cssTemplate:"css/handlebarsStr.css"//注释2
        }))
        .pipe(gulp.dest('min/img'));
});

八、异步执行
1.安装插件
cnpm i gulp-sequence --save-dev
2.引用

var sequence = require('gulp-sequence');

3.定义任务

gulp.task("default",sequence(
    "lessc",
    "sassc",
    "minJs",
    "mincss",
    "imagemin",
    "watchLess",
    "watchSass")
);