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，方便開發和管理。