I'm Harry Yu. Live in 80s Metaverse, work as a full stack developer (React family, Node.js, Ruby, GraphQL, etc).
Worked at Alibaba, and worked on the ICE project as the PM.
Grunt 新手一日学会 配套实验项目
I'm Harry Yu. Live in 80s Metaverse, work as a full stack developer (React family, Node.js, Ruby, GraphQL, etc).
Worked at Alibaba, and worked on the ICE project as the PM.
文章很详实,感谢分享!有个问题向您请教:
我在项目里用了Grunt,想以此实现自动化编译被修改的 Sass 文件。
Grunt package.json 内容如下:
{
"name": "grunt sass demo",
"version": "1.0.0",
"devDependencies": {
"grunt": "*",
"grunt-contrib-watch": "*",
"grunt-contrib-sass": "*"
}
}
Gruntfile.js 内容如下:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
meta: {
basePath: '../',
srcPath: '../assets/sass/', // 源码
deployPath: '../assets/css/' // 编译输出
},
banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
'<%= grunt.template.today("yyyy-mm-dd") %>\n' +
'* Copyright (c) <%= grunt.template.today("yyyy") %> ',
sass: {
dist: {
options: {
sourcemap: 'auto',
style: 'compressed'
},
// 这样写不起作用
// files: {
// src: '<%= meta.srcPath %>*.scss',
// dest: '<%= meta.deployPath %>*.css'
// }
// 这样只能编译特定的文件
// files: {
// '<%= meta.deployPath %>test1.css': '<%= meta.srcPath %>test1.scss'
// }
// 使用字典匹配
files: [{
expand: true,
cwd: '<%= meta.srcPath %>',
src: ['*.scss'],
dest: '<%= meta.deployPath %>',
ext: '.css'
}]
}
},
watch: {
scripts: {
files: ['<%= meta.srcPath %>*.scss'],
tasks: ['sass:dist']
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
};
然后运行 grunt watch 开启监视模式,当我修改 srcPath/sass/ 下的任一个 Sass 文件时,当前整个目录下的 Sass 文件都会被编译,请问如何设置才能只编译当前改动的文件?
怎么用github学习项目
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.