前端-如何用gulp快速搭建项目（sass预编译，代码压缩，css前缀，浏览器自动刷新，雪碧图合成）

一：gulp优点：

易于使用

通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理；

插件高质

Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。

构建快速

利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。

易于学习

通过最少的 API，掌握 Gulp 毫不费力，构建工作尽在掌握：如同一系列流管道。

二、依赖安装

1.安装node.js,

2.全局安装gulp

npm install gulp -g

3.本地安装gulp

npm init   初始化项目目录，生产package.js文件，

npm install gulp --save-dev   本地安装gulp

4.安装依赖（常用依赖截图如下）

5.在根目录下创建gulpfile.js文件用来编写任务。

三、代码实现如下

1.先附上目录结构

2.创建一个编译sass 的任务

gulp.task('compileSass',function(){
    gulp.src('./src/sass/*.scss')
    // 编译sass
    .pipe(sass({outputStyle:'compact'}))

    // 输出编译后的css文件
    .pipe(gulp.dest('./src/css'))
    // sass编译完成后刷新
    .pipe(browserSync.reload({stream:true}))
})

3.创建一个自动加css前缀，解决浏览器的css代码兼容性问题

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

gulp.task('testAutoFx', function () {
gulp.src('src/css/*.css')
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest('dist/css'));
});

4.创建一个浏览器自动刷新任务，当css 、js、html更改时自动刷新网页

var browserSync = require('browser-sync').create();

//浏览器同步
gulp.task("server",function(){
browserSync.init({
server:{baseDir:'./src'}
});

// **代表任意目录
// *代表任意文件名
gulp.watch('./src/**/*.html').on('change',browserSync.reload);
gulp.watch('./src/js/*.js').on('change',browserSync.reload);
gulp.watch('./src/css/*.css').on('change',browserSync.reload);

// Sass编译完成后再刷新
gulp.watch('./src/sass/*.scss',['compileSass']);//自动执行编译sass任务
gulp.watch('./src/css/*.css',['testAutoFx']);//自动加兼容性代码
})

当开发时在根目录路径下命令行执行 gulp server    就会实现自动编译、浏览器自动刷新操作

编译前sass

编译后css

5.当项目结束后需要一个压缩的任务

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

//创建一个打包js压缩的任务

gulp.task('jsmin',function(){
gulp.src('src/js/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
})

6.创建一个压缩css任务

var cssmin = require('gulp-minify-css');

//创建一个打包css压缩的任务

gulp.task('cssmin',function(){
gulp.src('dist/css/*.css')
.pipe(cssmin({
advanced: false,//类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
compatibility: 'ie7',//保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
keepBreaks: true,//类型：Boolean 默认：false [是否保留换行]
keepSpecialComments: '*'
//保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀
}))
.pipe(gulp.dest('dist/mincss'));
})

7.把这两个压缩任务放一起执行

//把压缩js 和css 放到一起

gulp.task('minJsCss',['cssmin','jsmin'])

所以允许这个任务就会对js 以及css 进行压缩

8.最后介绍一下一个比较实用的操作，就是当项目中比较多的小图标需要生产雪碧图的时候，可以用gulp.spritesmith自动完成并生成样式文件

首先我的icon图标文件如下：

建立任务

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

//icon 图标变为雪碧图
gulp.task('spritesmith',function(){
    gulp.src('src/img/*.png')
        .pipe(spritesmith({
            imgName:'sprite.png',//保存合并后的名称
            cssName:'dist/spritecss/sprite.css',//保存合并后css样式的地址
            padding:15,//合并时两个图片的间距
            algorithm:'binary-tree',//注释1
            //cssTemplate:'dest/css/handlebarsStr.css'//注释2
            cssTemplate:function(data){             //如果是函数的话，这可以这样写
               var arr=[];
                data.sprites.forEach(function (sprite) {
                    arr.push(".icon-"+sprite.name+
                    "{" +
                    "background-image: url('"+sprite.escaped_image+"');"+
                    "background-position: "+sprite.px.offset_x+"px "+sprite.px.offset_y+"px;"+
                    "width:"+sprite.px.width+";"+
                    "height:"+sprite.px.height+";"+
                    "}\n");
                });
                return arr.join("");
            }
        }))
        .pipe(gulp.dest('dist/images/sprite'));
})

然后执行命令 gulp spritesmith 最后生成如下图所示：

雪碧图：

样式文件

OK，最后附上我的gulpfile.js文件

var gulp = require('gulp');
var sass = require('gulp-sass');
var uglify= require('gulp-uglify');
var cssmin = require('gulp-minify-css');
var autoprefixer = require('gulp-autoprefixer');
var spritesmith=require('gulp.spritesmith');
var browserSync = require('browser-sync').create();

//创建一个编译sass 的任务
gulp.task('compileSass',function(){
    gulp.src('./src/sass/*.scss')
    // 编译sass
    .pipe(sass({outputStyle:'compact'}))

    // 输出编译后的css文件
    .pipe(gulp.dest('./src/css'))
    // sass编译完成后刷新
    .pipe(browserSync.reload({stream:true}))
})

//浏览器同步
gulp.task("server",function(){
    browserSync.init({
        server:{baseDir:'./src'}
    });

    // **代表任意目录
    // *代表任意文件名
    gulp.watch('./src/**/*.html').on('change',browserSync.reload);
    gulp.watch('./src/js/*.js').on('change',browserSync.reload);
    gulp.watch('./src/css/*.css').on('change',browserSync.reload);

    // Sass编译完成后再刷新
    gulp.watch('./src/sass/*.scss',['compileSass']);
    gulp.watch('./src/css/*.css',['testAutoFx']);
})

//创建一个打包js压缩的任务
gulp.task('jsmin',function(){
     gulp.src('src/js/*.js')
     .pipe(uglify())
     .pipe(gulp.dest('dist/js'));
})
//创建一个打包css压缩的任务
gulp.task('cssmin',function(){
    gulp.src('dist/css/*.css')
        .pipe(cssmin({
            advanced: false,//类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
            compatibility: 'ie7',//保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
            keepBreaks: true,//类型：Boolean 默认：false [是否保留换行]
            keepSpecialComments: '*'
            //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀
        }))
        .pipe(gulp.dest('dist/mincss'));
})

//自动加css前缀
gulp.task('testAutoFx', function () {
    gulp.src('src/css/*.css')
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(gulp.dest('dist/css'));
});

//把压缩js 和css 放到一起
gulp.task('minJsCss',['cssmin','jsmin'])

//icon 图标变为雪碧图
gulp.task('spritesmith',function(){
    gulp.src('src/img/*.png')
        .pipe(spritesmith({
            imgName:'sprite.png',//保存合并后的名称
            cssName:'dist/spritecss/sprite.css',//保存合并后css样式的地址
            padding:15,//合并时两个图片的间距
            algorithm:'binary-tree',//注释1
            //cssTemplate:'dest/css/handlebarsStr.css'//注释2
            cssTemplate:function(data){             //如果是函数的话，这可以这样写
               var arr=[];
                data.sprites.forEach(function (sprite) {
                    arr.push(".icon-"+sprite.name+
                    "{" +
                    "background-image: url('"+sprite.escaped_image+"');"+
                    "background-position: "+sprite.px.offset_x+"px "+sprite.px.offset_y+"px;"+
                    "width:"+sprite.px.width+";"+
                    "height:"+sprite.px.height+";"+
                    "}\n");
                });
                return arr.join("");
            }
        }))
        .pipe(gulp.dest('dist/images/sprite'));
})