gulp&sass安装配置

首先需要nodejs和npm

然后安装Gulp及其Sass预处理器

在主题目录的根目录中，创建一个空的package.json并复制粘贴以下代码：

 

{
  "author": "Magento Commerce Inc.",
  "description": "Magento node modules dependencies for local development",
  "version": "1.0.0",
  "main": "gulpfile.js",
  "dependencies": {
    "bower": "^1.8.8",
    "gulp-autoprefixer": "^6.1.0",
    "gulp-clean-css": "^4.2.0",
    "gulp-concat": "^2.6.1",
    "gulp-install": "^1.1.0",
    "gulp-webserver": "^0.9.1",
    "path": "^0.12.7"
  },
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-livereload": "^4.0.1",
    "gulp-notify": "^3.0.0",
    "gulp-plumber": "^1.1.0",
    "gulp-sass": "^3.2.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}

1. 通过在命令提示符中运行以下命令来安装Gulp：

   sudo npm i gulp -g

2. 通过运行以下命令为Sass预处理器添加gulp-sass包：

   npm install gulp-sass

3. 创建gulpfile.js
   

   var gulp         = require('gulp'),//gulp模块
       sass         = require('gulp-sass'),//.sass编译模块，将sass文件（.scss和.sass后缀）编译成css文件
       plumber      = require('gulp-plumber'),
       notify       = require('gulp-notify'),
       auto         = require('gulp-autoprefixer'),
       cleanCss     = require('gulp-clean-css'); // css压缩
       webserver    = require('gulp-webserver'), //热更新模块，每次编辑完保存时，自动更新网页信息
       concat       = require('gulp-concat');//合并模块、可以将多个css文件合并成一个文件
   
   var config = {
       src           : './web/scss/**/*.scss',
       dest          : './web/css/',
       target        : 'custom.css',
       from          : './web/scss/custom.scss'
   };
   
   gulp.task('server',function(){
       gulp.src('./')
           .pipe(webserver({
               host:'127.0.0.1',
               port:'8888',
               livereload:true,
               directoryListing:false
           }))
   })
   
   // Error message
   var onError = function (err) {
       notify.onError({
           title   : 'Gulp',
           subtitle: 'Failure!',
           message : 'Error: <%= error.message %>',
           sound   : 'Beep'
       })(err);
   
       this.emit('end');
   };
   
   // Compile CSS
   gulp.task('styles', function () {
       var stream = gulp
           .src(config.from)//需要编译的目标文件
           .pipe(plumber({errorHandler: onError}))
           .pipe(sass().on('error', sass.logError));
   
       return stream
           .pipe(concat(config.target))//合并为目标文件
           .pipe(auto({//处理兼容
               browsers:['last 2 version'],
               cascade:false
           }))
           .pipe(cleanCss())//压缩
           .pipe(gulp.dest(config.dest))//合并后的文件放置
           .pipe(notify({
               message: 'SASS converted to CSS'
           }));
   });
   gulp.task('watch', function () {
       gulp.watch(config.src, ['styles']);//监听目标目录下的文件改动，并且调动task
   });
   gulp.task('default', ['styles', 'watch', 'server']);

4. 命令行gulp。每当目标文件改动就会自动编译，建议在custom.scss中使用@import引入组件scss，方便开发和管理。