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

时间 2019-11-17

标签前端如何 gulp 快速搭建项目 sass 编译代码压缩 css 前缀浏览器自动刷新雪碧合成栏目 JavaScript 繁體版

原文原文链接

一：gulp优势：css

易于使用

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

插件高质

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

构建快速

利用 Node.js 流的威力，你能够快速构建项目并减小频繁的 IO 操做。npm

易于学习

经过最少的 API，掌握 Gulp 绝不费力，构建工做尽在掌握：如同一系列流管道。gulp

2、依赖安装浏览器

1.安装node.js,sass

2.全局安装gulp函数

npm install gulp -g学习

3.本地安装gulp优化

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

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

4.安装依赖（经常使用依赖截图以下）

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

3、代码实现以下

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'));
})