注:个人笔记。
Web Tools: Grunt
1.前提是你已经安装过了node。在终端输入下命令回车。
npm install -g grunt-cli
2.在你的项目中创建一个package.json文件,输入一下代码。
{
"name": "conFusion",
"private": true,
"devDependencies": {},
"engines": {
"node": ">=0.10.0"
}
}
3.将grunt安装到你的项目中。
npm install grunt --save-dev
4.在你的项目中建一个Gruntfile.js文件,输入一下代码。
'use strict';
module.exports = function (grunt) {
// Define the configuration for all the tasks
grunt.initConfig({
});
};
5.接下来安装一些开发必要的插件。
npm install grunt-contrib-jshint --save-dev
npm install jshint-stylish --save-dev
npm install time-grunt --save-dev
npm install jit-grunt --save-dev
npm install grunt-contrib-copy --save-dev
npm install grunt-contrib-clean --save-dev
npm install grunt-contrib-concat --save-dev
npm install grunt-contrib-cssmin --save-dev
npm install grunt-contrib-uglify --save-dev
npm install grunt-filerev --save-dev
npm install grunt-usemin --save-dev
npm install grunt-contrib-watch --save-dev
npm install grunt-contrib-connect --save-dev
6.当在gruntfile.js中也配置好了以后,在终端输入
grunt serve
启动grunt配置的项目。
Web Tools: Gulp
和grunt的目的是一样的,只不过grunt是配置优先,gulp是编码优先。
npm install -g gulp
{
"name": "conFusion",
"private": true,
"devDependencies": {
},
"engines": {
"node": ">=0.10.0"
}
}
npm install gulp --save-dev
npm install jshint gulp-jshint jshint-stylish gulp-imagemin gulp-concat gulp-uglify ``gulp-minify-css gulp-usemin gulp-cache gulp-changed gulp-rev gulp-rename gulp-notify
browser-sync del –save-dev
1.当你在gulpfile.js文件中配置好以后,在终端启动
gulp
或者 gulp watch
即可
Grunt Resources
Grunt
Writing an Awesome Build Script with Grunt
Clean Grunt
File Globbing
grunt-contrib-jshint
jshint-stylish
grunt-contrib-copy
grunt-contrib-clean
grunt-usemin
grunt-contrib-concat
grunt-contrib-cssmin
grunt-contrib-uglify
grunt-filerev
Gulp Resources
Gulp
An Introduction to Gulp.js
Getting started with gulp
Building with Gulp