中心线

一个热爱“自由”的笔记博客

使用gulp 构建sass 开发环境

| 0 comments

sass 是一个强大的CSS样式处理引擎,有了这个东西我们可以像学习编程语言一样来组织自己的CSS了。

gulp 是一个用来执行自动任务的工具。如,自动监听,如果有变化则执行一系列的动作。

首先我们需要先安装好nodejs,Win10 安装 nodejs 笔记 这是我的安装记录。

安装


我们只要安装gulp 和 gulp-sass着两个东西就够了,在项目根目录执行一下命令。

npm i gulp gulp-sass --save-dev

这是局部安装。

构建 gulp sass 基础架构


项目结构:

  1. gulpfile.js
  2. scss/base.scss
  3. css
  4. node_modules

node_modules 目录不用管,gulpfile.js文件是用来写gulp代码的,scss目录下可以放多个.scss文件,css文件夹用来储存编译后的css文件。

gulpfile.js


let gulp=require('gulp');
let sass=require('gulp-sass');

gulp.task('sass', ()=>{
    return gulp.src('scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('css'))
});

gulp.task('watch', function(){
    gulp.watch('./scss/**/*.scss', gulp.series('sass'));
})

值得注意的一点是 gulp4 的版本有点改变,gulp.watch(‘./scss/**/*.scss’, gulp.series(‘sass’)); 这部分和以前不一样了。

正确的

gulp.task('watch', function(){
    gulp.watch('./scss/**/*.scss', gulp.series('sass'));
})

错误的

gulp.task('watch', function(){
    gulp.watch('./scss/**/*.scss', ['sass']);
})

需要使用gulp.series()方法。

嵌套多个任务

gulp.task('default',gulp.series(gulp.parallel('connect','watchs','html','css','js')));

gulp 查用插件


  • htmml压缩:gulp-htmlmin
  • js压缩:gulp-uglify(ES6的有些语法可能不支持,所以压缩之前先用babel转成es5)
  • 合并文件:gulp-concat
  • 文件重命名:gulp-rename
  • 编译Sass: gulp-sass
  • 编译 Less:gulp-less
  • 浏览器同步测试:browser-sync
  • 创建node服务器:http-server
  • 图片压缩:gulp-image
  • css压缩:gulp-clean-css
  • 补全浏览器兼容的css:gulp-autoprefixer

gulp-sass


gulp.task('compileSass', async()=>{
    gulp.src("./src/sass/*.scss")
    .pipe(sass({outputStyle: 'compact'}))
    .pipe(gulp.dest("./src/css"))
});

<!-- coutputStyle: 配置参数 -->
nested(默认)
expanded:展开
compact:单行
compressed:压缩

sass监听


gulp.task("jtSass", function(){
    gulp.watch("./src/sass", gulp.series("compileSass"));
});

gulp-uglify, gulp-concat, gulp-rename


gulp.task("merge", async()=>{
    gulp.src(["./src/js/*.js", "!./src/js/{all, all.min}.js"])
    // 合并
    .pipe(concat("all.js"))
    .pipe(gulp.dest("./src/js"))
    // 压缩
    .pipe(uglify({compress: true}))
    // 重命名
    .pipe(rename({suffix: ".min"}))
    .pipe(gulp.dest("./src/js"))
});

browser-sync


gulp.task("server", async()=>{
    browserSync({
        // 创建一个静态服务器
        server: "./src",
        // 监听文件
        files: ["./src/**/*.html", "./src/**/*.css"],
        // 指定端口
        port: 10000,
        // 代理服务器,代理php服务器,能够识别php
        proxy: "http://localhost:10000"
    })
    // 监听sass的修改
    gulp.watch("./src/sass", gulp.series("compileSass"));
});

gulp-autoprefixer


gulp.task('cssPre', async()=>{
    gulp.src('./src/css/*.css')
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(gulp.dest('./cssTest'))
});

gulp-clean-css


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

 

除非注明,否则均为中心线原创文章,转载必须以链接形式标明本文链接

本文链接:https://www.z10.xin/archives/337

发表评论

Required fields are marked *.