Gulp 构建 Sass 环境

gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;它不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用它,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率。

安装 Gulp

npm i gulp --save-dev

创建 package.json 文件

注:package.json是基于nodejs项目必不可少的配置文件,它是存在项目根目录的普通json文件

通过执行 npm init 来交互式创建 package.json 文件,根据提示输入相应信息即可。package.json 文件内容如:

{
  "name": "zsf-demo-1",
  "version": "1.0.0",
  "description": "demo 1",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "zsf",
  "license": "ISC",
  "devDependencies": {
    "del": "^5.1.0",
    "gulp": "^4.0.2",
    "gulp-babel": "^8.0.0",
    "gulp-clean-css": "^4.2.0",
    "gulp-concat": "^2.6.1",
    "gulp-rename": "^2.0.0",
    "gulp-sass": "^4.0.2",
    "gulp-uglify": "^3.0.2"
  }
}

安装相关插件

  1. sass的编译(gulp-sass
  2. less编译 (gulp-less
  3. 重命名(gulp-rename
  4. 自动添加css前缀(gulp-autoprefixer
  5. 压缩css(gulp-minify-css
  6. js代码校验(gulp-jshint
  7. 合并js文件(gulp-concat
  8. 压缩js代码(gulp-uglify
  9. 压缩图片(gulp-imagemin
  10. 自动刷新页面(gulp-livereload,谷歌浏览器亲测,谷歌浏览器需安装livereload插件)
  11. 图片缓存,只有图片替换了才压缩(gulp-cache
  12. 更改提醒(gulp-notify
$ npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-clean gulp-notify gulp-rename gulp-livereload gulp-cache --save-dev

开始使用 gulp

  1. 在项目根目录创建 gulpfile.js 文件
  2. 编写 gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');    // sass 编译
var autoprefixer = require('gulp-autoprefixer');    // 自动浏览器前缀


var paths = {
    style: {
        src: 'assets/src/scss/**/*.scss',
        dest: 'assets/dest/css'
    },
    script: {
        src: 'assets/src/js/**/*.js',
        dest: 'assets/dest/js'
    }
};

// sass outputStyle:
// compressed: 压缩
// nested: 嵌套输出
// expanded: 展开输出
// compact: 紧凑输出
function Style(cb) {
    return gulp.src(paths.style.src)
    .pipe(sass.sync({outputStyle: 'expanded'}).on('error', sass.logError))
    .pipe(autoprefixer({
        browsers: ['last 2 versions','Android >= 4.0'],
        cascade: false
    }))
    .pipe(gulp.dest(paths.style.dest));
}

function WatchTask(cb) {
    gulp.watch(paths.style.src, Style);
    cb();
}

exports.default = gulp.parallel(Style, WatchTask);
此条目发表在Code分类目录,贴了, , , 标签。将固定链接加入收藏夹。

发表评论

电子邮件地址不会被公开。 必填项已用*标注