如何在libsass工作流程中使用Singularity Extras?我的意思是与npm和gulp而不是ruby宝石。提前致谢。
答案 0 :(得分:1)
这就是我设法用Gulp设置Singularitygs + Breakpoint + Compass(用于Drupal主题)。
全局安装gulp
sudo npm install -g gulp
将以下package.json复制到项目的根文件夹中。
{
"name": "your_project_name",
"version": "1.0.0",
"description": "",
"main": "gulpfile.js",
"dependencies": {
"browser-sync": "^2.9.3",
"gulp": "^3.9.0",
"gulp-autoprefixer": "^2.3.1",
"gulp-plumber": "^1.0.1",
"gulp-sass": "^2.0.4",
"gulp-sourcemaps": "^1.5.2",
"breakpoint-sass": "^2.6.1",
"compass-mixins": "^0.12.7",
"singularitygs": "^1.6.2",
"gulp-watch": "^4.3.5"
},
"devDependencies": {
"gulp-cssmin": "^0.1.7",
"gulp-strip-css-comments": "^1.2.0",
"gulp-uglify": "^1.4.1",
"gulp-uncss": "^1.0.3",
"modularscale-sass": "^2.1.1",
"node-sass-globbing": "0.0.23"
},
"scripts": {},
"author": "",
"license": "ISC"
}
目录中的 cd
并运行npm install
。
第二:创建和编辑你的gulpfile.js:
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
var importer = require('node-sass-globbing');
var plumber = require('gulp-plumber');
var browserSync = require('browser-sync').create();
var cssmin = require('gulp-cssmin');
var uncss = require('gulp-uncss');
var stripCssComments = require('gulp-strip-css-comments');
var uglify = require('gulp-uglify');
var sass_config = {
importer: importer,
includePaths: [
'node_modules/breakpoint-sass/stylesheets/',
'node_modules/singularitygs/stylesheets/',
'node_modules/modularscale-sass/stylesheets',
// 'node_modules/singularity-extras/stylesheets/',
'node_modules/compass-mixins/lib/'
]
};
gulp.task('uglify', function() {
return gulp.src('js/*.js')
.pipe(uglify())
.pipe(gulp.dest('js_min'));
});
gulp.task('browser-sync', function() {
browserSync.init({
injectChanges: true,
proxy: "127.0.0.1/your_project_folder"
});
gulp.watch("./sass/**/*.scss", ['sass']);
gulp.watch("./css/**/*.css").on('change', browserSync.reload);
gulp.watch("./js/**/*.js", ['uglify']).on('change', browserSync.reload);
});
gulp.task('sass', function () {
gulp.src('./sass/**/*.scss')
.pipe(plumber())
//.pipe(sourcemaps.init())
.pipe(sass(sass_config).on('error', sass.logError))
.pipe(autoprefixer({
browsers: ['last 2 version']
}))
//.pipe(sourcemaps.write('.'))
.pipe(stripCssComments({preserve: false}))
.pipe(gulp.dest('./css'))
// .pipe(uncss({
// html: ['./html/**/*.html']
// }))
.pipe(cssmin())
.pipe(gulp.dest('./css'));
});
gulp.task('default', ['sass', 'uglify', 'browser-sync']);
第三:在" theme.styles.scss"的顶部要求以下内容:
@import "compass";
@import 'modular-scale';
@import "singularitygs";
@import "singularity-extras";
@import "breakpoint";
第四:不要忘记在你的" theme.styles.scss"中包含每个部分内容。像这样:
@import "compass";
@import 'modular-scale';
@import "singularitygs";
@import "singularity-extras";
@import "breakpoint";
@import "sass/variables/**/*.scss";
@import "sass/abstractions/**/*.scss";
@import "sass/base/**/*.scss";
@import "sass/components/**/*.scss";
如果您在使用Drupal和browserSync(白屏死机)时遇到任何错误,您可以在主题的根文件夹中运行此命令:
find node_modules -type f -name '*.info' | xargs rm
这将删除node_modules的.info文件,这会导致Drupal出现问题。 另见:https://drupal.stackexchange.com/questions/126880/how-do-i-prevent-drupal-raising-a-segmentation-fault-when-using-a-node-js-themin