什么是Yeoman的工作流程以处理Sass文件? [英] What is workflow in Yeoman to work with Sass files?
问题描述
我尝试使用yeoman,但我不知道如何使用自己的sass文件。
使用
grunt server
Sass文件被监视并编译成
.tmp / styles /
但没有参考编译过的样式表,除了< link rel =stylesheethref =styles / main.css>
在开发过程中,如何在index.html中使用编译好的sass文件,推荐使用这种方式?
例如 你能给我一些简单的例子吗? 它是默认的yeoman安装。我做到了这一点: grunt server
,如果我改变我的风格 app / styles / my.sass
到 .tmp /styles/my.css
,这会被覆盖,它在服务器之外(localhost:9000)。因此,在 index.html
中链接它是不可能的。
$ b $ < main.css中的所有内容
包括 my.sass
但在开发过程中我不知道如何在 index.html
中使用自己的sass文件, 。
yo角度测试
app / styles / style.sass
grunt server
this编译 style.sass
到 .tmp / styles / style.css
style.css
它(抱歉,这可能是一个愚蠢的问题,但我也是yeoman和grunt的新手)
这是yeoman的Gruntfile.js:
'use strict';
var lrSnippet = require('grunt-contrib-livereload / lib / utils')。livereloadSnippet;
var mountFolder = function(connect,dir){
return connect.static(require('path')。resolve(dir));
};
module.exports = function(grunt){
//载入所有grunt任务
require('matchdep')。filterDev('grunt - *')。forEach(grunt .loadNpmTasks);
//可配置路径
var yeomanConfig = {
app:'app',
dist:'dist'
};
尝试{
yeomanConfig.app = require('./ component.json')。appPath || yeomanConfig.app;
} catch(e){}
grunt.initConfig({
yeoman:yeomanConfig,
watch:{
coffee:{
文件:['<%= yeoman.app%> / scripts / {,* /} *。coffee'],
tasks:['coffee:dist']
},
coffeeTest:{'b $ b files:['test / spec / {,* /} *。coffee'],
tasks:['coffee:test']
},
指南针:{'b $ b files:['<%= yeoman.app%> / styles / {,* /} *。{scss,sass}'],
tasks:['compass']
},
livereload:{
文件:[
'<%= yeoman.app%> / {,* /} *。html',
'{.tmp,<%= yeoman.app%>} / styles / {,* /} * .css',
'{.tmp,<%= yeoman.app%>} /脚本/ {,* /} *。js',
'<%= yeoman.app%> / images / {,* /} *。{png,jpg,jpeg,gif,webp}'
],
任务:['livereload']
}
},
connect:{
livereload:{
选项:{
port:9000,
//将其更改为'0.0.0.0'以从外部访问服务器。
hostname:'localhost',
中间件:函数(connect){
return [
lrSnippet,
mountFolder(connect,'.tmp'),
mountFolder(connect,yeomanConfig.app)
];
$ b test
options {
port:9000,
middleware:function(connect){
return [
mountFolder(connect,'.tmp'),
mountFolder(connect,'test')
];
}
}
}
},
open:{
server:{
url:'http:// localhost:< %= connect.livereload.options.port%>'
}
},
clean:{
dist:['.tmp','<%= yeoman。 dist%> / *'],
server:'.tmp'
},
jshint:{
options:{
jshintrc:'.jshintrc'
},
all:[
'Gruntfile.js',
'<%= yeoman.app%> / scripts / {,* /} *。js'
karma {
单元:{
configFile:'karma.conf.js',
singleRun:true
}
},
coffee:{
dist:{
files:{
'.tmp / scripts / coffee.js':'<%= yeoman.app %> / scripts / *。coffee'
}
},
test:{
files:[{
expand:true,
cwd: '.tmp / spec',
src:'* .coffee',
dest:'test / spec'
}]
}
},
指南针:{
options:{
sassDir:'<%= yeoman.app%> / styles',
cssDir:'.tmp / styles',
imagesDir:'<%= yeoman.app%> ; / images',
javascriptsDir:'<%= yeoman.app%> / scripts',
fontsDir:'<%= yeoman.app%> / styles / fonts',
importPath:'<%= yeoman.app%> / components',
relativeAssets:true
},
dist:{},
server:{
选项:{
debugInfo:true
}
}
},
concat:{
dist:{
files:{
'<%= yeoman.dist%> /scripts/scripts.js':[
'.tmp / scripts / {,* /} *。js',
'< ;%= yeoman.app%> / scripts / {,* /} * .js'
]
}
}
},
u seminPrepare:{
html:'<%= yeoman.app%> /index.html',
选项:{
dest:'<%= yeoman.dist%> '
}
},
usemin:{
html:['<%= yeoman.dist%> / {,* /} *。html'],
css:['<%= yeoman.dist%> / styles / {,* /} * .css'],
options:{
dirs:['<%= yeoman.dist%>']
}
},
imagemin:{
dist:{
files:[{
expand:true,
cwd:'<%= yeoman.app%> / images',
src:'{,* /} *。{png,jpg,jpeg}',
dest:' <%= yeoman.dist%> / images'
}]
}
},
cssmin:{
dist:{
files: {
'<%= yeoman.dist%> /styles/main.css':[
'.tmp / styles / {,* /} *。css',
' <%= yeoman.app%> / styles / {,* /} *。css'
]
}
}
},
htmlmin:{
dist:{
options:{
/ * removeCommentsFromCDATA:true,
// https:// github。 com / yeoman / grunt-usemin / issues / 44
// collapseWhitespace:true,
collapseBooleanAttributes:true,
removeAttributeQuotes:true,
removeRedundantAttributes:true,
useShortDoctype :true,
removeEmptyAttributes:true,
removeOptionalTags:true * /
},
files:[{
expand:true,
cwd:'< ;%= yeoman.app%>',
src:['* .html','views / *。html'],
dest:'<%= yeoman.dist%> '
}]
}
},
cdnify:{
dist:{
html:['<%= yeoman.dist%> /*.html']
}
},
ngmin:{
dist:{
files:[{
expand:true,
cwd: <%= yeoman.dist%> / scripts',
src:'* .js',
dest:'<%= yeoman.dist%> / scripts'
}]
}
},
uglify:{
dist:{
files:{
'<%= yeoman.dist%> / scripts / scripts.js':[
'<%= yeoman.dist%> /scripts/scripts.js'
],
}
}
},
copy:{
dist:{
files:[{
expand:true,
dot:true,
cwd:'<% = yeoman.app%>',
dest:'<%= yeoman.dist%>',
src:[
'*。{ico,txt}',
'.htaccess',
'组件/ ** / *',
'图片/ {,* /} *。{gif,webp}'
]
}]
}
}
});
grunt.renameTask('regarde','watch');
//当mincss任务被重命名时删除
grunt.renameTask('mincss','cssmin');
grunt.registerTask('server',[
'clean:server',
'coffee:dist',
'compass:server',
'livereload-start',
'connect:livereload',
'open',
'watch'
]);
grunt.registerTask('test',[
'clean:server',
'coffee',
'compass',
'connect:测试',
'karma'
]);
grunt.registerTask('build',[
'clean:dist',
'jshint',
'test',
'coffee' ,
'compass:dist',
'useminPrepare',
'imagemin',
'cssmin',
'htmlmin',
'concat' ,
'copy',
'cdnify',
'usemin',
'ngmin',
'uglify'
]);
grunt.registerTask('default',['build']);
};
您正在查找的内容记录在: https://github.com/yeoman/grunt-usemin
只需将您的css导入包装到注释块中,就如同使用javascript文件一样
< ! - build:css styles / main.css - >
< link rel =stylesheethref =styles / base.css>
< link rel =stylesheethref =styles / modules.css>
< link rel =stylesheethref =styles / layout.css>
<! - endbuild - >
确保您的生成器是最新的,并且您的咕噜任务都已设置。做魔术的人是'useminPrepare'
I try to use yeoman but I don't know how to use my own sass files with it.
With
grunt server
Sass files are watched and compiled into
.tmp/styles/
But there is no reference to the compiled stylesheet, except <link rel="stylesheet" href="styles/main.css">
So, what is the recommended way to use the compiled sass files in index.html during development?
E.g. grunt server
, if I change my style app/styles/my.sass
into .tmp/styles/my.css
, this is overwritten and it is outside the server (localhost:9000). Therefore, it is impossible to link it in index.html
.
With grunt build
is everything within main.css
include my.sass
but during the development I don't know how to use my own sass files in index.html
.
Can you give me some simple example?
It is default yeoman installation. I did this:
yo angular test
- I add
app/styles/style.sass
grunt server
this compilestyle.sass
into.tmp/styles/style.css
- now I don't know how to include
style.css
it in html
(sorry may be this is a stupid question but I am new in yeoman and grunt also)
This is Gruntfile.js from yeoman:
'use strict';
var lrSnippet = require('grunt-contrib-livereload/lib/utils').livereloadSnippet;
var mountFolder = function (connect, dir) {
return connect.static(require('path').resolve(dir));
};
module.exports = function (grunt) {
// load all grunt tasks
require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
// configurable paths
var yeomanConfig = {
app: 'app',
dist: 'dist'
};
try {
yeomanConfig.app = require('./component.json').appPath || yeomanConfig.app;
} catch (e) {}
grunt.initConfig({
yeoman: yeomanConfig,
watch: {
coffee: {
files: ['<%= yeoman.app %>/scripts/{,*/}*.coffee'],
tasks: ['coffee:dist']
},
coffeeTest: {
files: ['test/spec/{,*/}*.coffee'],
tasks: ['coffee:test']
},
compass: {
files: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
tasks: ['compass']
},
livereload: {
files: [
'<%= yeoman.app %>/{,*/}*.html',
'{.tmp,<%= yeoman.app %>}/styles/{,*/}*.css',
'{.tmp,<%= yeoman.app %>}/scripts/{,*/}*.js',
'<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp}'
],
tasks: ['livereload']
}
},
connect: {
livereload: {
options: {
port: 9000,
// Change this to '0.0.0.0' to access the server from outside.
hostname: 'localhost',
middleware: function (connect) {
return [
lrSnippet,
mountFolder(connect, '.tmp'),
mountFolder(connect, yeomanConfig.app)
];
}
}
},
test: {
options: {
port: 9000,
middleware: function (connect) {
return [
mountFolder(connect, '.tmp'),
mountFolder(connect, 'test')
];
}
}
}
},
open: {
server: {
url: 'http://localhost:<%= connect.livereload.options.port %>'
}
},
clean: {
dist: ['.tmp', '<%= yeoman.dist %>/*'],
server: '.tmp'
},
jshint: {
options: {
jshintrc: '.jshintrc'
},
all: [
'Gruntfile.js',
'<%= yeoman.app %>/scripts/{,*/}*.js'
]
},
karma: {
unit: {
configFile: 'karma.conf.js',
singleRun: true
}
},
coffee: {
dist: {
files: {
'.tmp/scripts/coffee.js': '<%= yeoman.app %>/scripts/*.coffee'
}
},
test: {
files: [{
expand: true,
cwd: '.tmp/spec',
src: '*.coffee',
dest: 'test/spec'
}]
}
},
compass: {
options: {
sassDir: '<%= yeoman.app %>/styles',
cssDir: '.tmp/styles',
imagesDir: '<%= yeoman.app %>/images',
javascriptsDir: '<%= yeoman.app %>/scripts',
fontsDir: '<%= yeoman.app %>/styles/fonts',
importPath: '<%= yeoman.app %>/components',
relativeAssets: true
},
dist: {},
server: {
options: {
debugInfo: true
}
}
},
concat: {
dist: {
files: {
'<%= yeoman.dist %>/scripts/scripts.js': [
'.tmp/scripts/{,*/}*.js',
'<%= yeoman.app %>/scripts/{,*/}*.js'
]
}
}
},
useminPrepare: {
html: '<%= yeoman.app %>/index.html',
options: {
dest: '<%= yeoman.dist %>'
}
},
usemin: {
html: ['<%= yeoman.dist %>/{,*/}*.html'],
css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
options: {
dirs: ['<%= yeoman.dist %>']
}
},
imagemin: {
dist: {
files: [{
expand: true,
cwd: '<%= yeoman.app %>/images',
src: '{,*/}*.{png,jpg,jpeg}',
dest: '<%= yeoman.dist %>/images'
}]
}
},
cssmin: {
dist: {
files: {
'<%= yeoman.dist %>/styles/main.css': [
'.tmp/styles/{,*/}*.css',
'<%= yeoman.app %>/styles/{,*/}*.css'
]
}
}
},
htmlmin: {
dist: {
options: {
/*removeCommentsFromCDATA: true,
// https://github.com/yeoman/grunt-usemin/issues/44
//collapseWhitespace: true,
collapseBooleanAttributes: true,
removeAttributeQuotes: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeOptionalTags: true*/
},
files: [{
expand: true,
cwd: '<%= yeoman.app %>',
src: ['*.html', 'views/*.html'],
dest: '<%= yeoman.dist %>'
}]
}
},
cdnify: {
dist: {
html: ['<%= yeoman.dist %>/*.html']
}
},
ngmin: {
dist: {
files: [{
expand: true,
cwd: '<%= yeoman.dist %>/scripts',
src: '*.js',
dest: '<%= yeoman.dist %>/scripts'
}]
}
},
uglify: {
dist: {
files: {
'<%= yeoman.dist %>/scripts/scripts.js': [
'<%= yeoman.dist %>/scripts/scripts.js'
],
}
}
},
copy: {
dist: {
files: [{
expand: true,
dot: true,
cwd: '<%= yeoman.app %>',
dest: '<%= yeoman.dist %>',
src: [
'*.{ico,txt}',
'.htaccess',
'components/**/*',
'images/{,*/}*.{gif,webp}'
]
}]
}
}
});
grunt.renameTask('regarde', 'watch');
// remove when mincss task is renamed
grunt.renameTask('mincss', 'cssmin');
grunt.registerTask('server', [
'clean:server',
'coffee:dist',
'compass:server',
'livereload-start',
'connect:livereload',
'open',
'watch'
]);
grunt.registerTask('test', [
'clean:server',
'coffee',
'compass',
'connect:test',
'karma'
]);
grunt.registerTask('build', [
'clean:dist',
'jshint',
'test',
'coffee',
'compass:dist',
'useminPrepare',
'imagemin',
'cssmin',
'htmlmin',
'concat',
'copy',
'cdnify',
'usemin',
'ngmin',
'uglify'
]);
grunt.registerTask('default', ['build']);
};
What you are looking for is documented on: https://github.com/yeoman/grunt-usemin
Simply wrap your css imports in a comment block similarly to the way it's done with the javascript files
<!-- build:css styles/main.css -->
<link rel="stylesheet" href="styles/base.css">
<link rel="stylesheet" href="styles/modules.css">
<link rel="stylesheet" href="styles/layout.css">
<!-- endbuild -->
make sure your generator is up to date and your grunt tasks are all set. The one doing the magic is 'useminPrepare'
这篇关于什么是Yeoman的工作流程以处理Sass文件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!