Jame's Blog

前端開發心得 front-end Develop

從 compass 到 node-sass

| Comments

Compass 專案大改造
由於Compass提供了很多內建的mixin
若改用node-sass勢必要安裝相當多的套件取代
這就是本次的目標
本次的專案是用gulp打包工具
所以就針對gulp來做這次的改造工作

所需的套件有哪些?

  1. gulp-sass
  2. compass-importer 提供一些 compass 函式
  3. sprite-magic-importer 提供一些 compass的sprite 函式
  4. node-sass-asset-functions 提供 compass 的 image-url 相關的函式
  5. compass-sass-mixins 提供一些 compass的sprite 函式

次要的部分

  1. gulp-clean-css
  2. gulp-sourcemaps

gulp 的設定如下

gulp.task("compass", function() {
  gulp
    .src("./resources/assets/sass/*.scss")
    .pipe(sourcemaps.init())
    .pipe(
      plumber(function(error) {
        console.log(error.message);
        this.emit("end"); //中斷這個task

      })
    )
    .pipe(
      sass({
        functions: assetFunctions({
          images_path: "public/img", //設定 image-url 的圖檔位置

          http_images_path: "/img"   //設定 image-url 的輸出後的路徑

        }),
        includePaths: ["node_modules/compass-sass-mixins/lib/"], //設定import sass檔案的路徑有哪些

        importer: [
          SpriteMagicImporter({
            sass_dir: "resources/assets/sass",
            images_dir: "public/img",
            generated_images_dir: "public/img",
            http_stylesheets_path: "/css",
            http_generated_images_path: "/img"
            // cache_dir: 'public/.cache', debug: true

          }),
          compass
        ]
      })
    )
    .pipe(cleanCSS())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest("./public/css"));
});

Comments

comments powered by Disqus