Skip to content

CH563/flexibleTemplate

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

#淘宝flexible移动适配方法-说明在此 ####使用flexible搭建gulp工作目录和常用插件方便平时工作需要

主要使用的插件有

gulp-sass 编译sass,配合postcss会成为libsass编译

gulp-postcss 利用JS插件实现的用来改变CSS的工具说明

postcss-px2rem postcss的px自动转rem插件,方便淘宝flexible使用转化

postcss-px2rem postcss的px自动转rem插件

autoprefixer postcss的自动加前缀插件

gulp-minify-css 压缩css代码

gulp.task('css', function() {
    gulp.src('src/sass/*.scss')
        .pipe(plumber()) //最前面
        .pipe(sass()) //需要放在postcss前面
        .pipe(postcss([
            autoprefixer({
                browsers: ['last 2 versions', 'Android >= 4.0'],
                cascade: true, //是否美化属性值 默认:true
                remove: true //是否去掉不必要的前缀 默认:true
            }),
            px2rem({ remUnit: 75 }) //视设计图大小而设
        ]))
        .pipe(minifyCss())
        .pipe(gulp.dest('dist/css'));
});

gulp-pug 编译jade说明

gulp-uglify 压缩JS代码

browser-sync 搭建浏览器同步自动刷新

gulp-plumber 检查代码编译报错,改正而不退出gulp任务

gulp-tinypng-compress 压缩图片,需要上官网申请密钥,免费版一个月可以压500张

全局安装了node/npm/gulp/sass/pug等后

clone本目录到本地,然后在本目录运行npm install安装

安装后运行gulp即可以实时查看浏览

全部文件生成到<dist>命令是gulp todist

About

利用flexible搭建的gulp工作目录

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors