全局安装gulp
$ npm install --global gulp
作为项目的开发依赖(devDependencies)安装
$ npm install --save-dev gulp
在项目根目录下创建一个名为 gulpfile.js
的文件:
var gulp = require('gulp');
gulp.task('default', function() {
// 将你的默认的任务代码放在这
});
运行gulp
$ gulp
npm install --save-dev gulp-asset-rev
使用npm卸载插件:npm uninstall
安装node
安装npm
npm install <name> [-g][--save-dev]
;npm install gulp-less --save-dev
;可选择cnpm)代替npm,速度快
npm install cnpm -g --registry=https://registry.npm.taobao.org
sudo cnpm install gulp -g
新建package.json文件
基于nodejs项目必不可少的配置文件,放在根目录下的普通json文件
如下,(json文件内不能添加注释)
{
"name": "test", //项目名称(必须)
"version": "1.0.0", //项目版本(必须)
"description": "这是一个什么项目呢", //项目描述(必须)
"homepage": "", //项目主页
"repository": { //项目资源库
"type": "git",
"url": "https://github.com/huanghui8030/"
},
"author": { //项目作者信息
"name": "huanghui",
"email": "huanghui8030@qq.com"
},
"license": "ISC", //项目许可协议
"devDependencies": { //项目依赖的插件
"gulp": "^3.8.11",
"gulp-less": "^3.0.0"
}
}
可通过命令行直接生成该配置文件,cnpm init
本地安装gulp插件
cnpm install --save-dev
cnpm install gulp-less --save-dev
cnpm install gulp --save-dev
。全局安装了gulp,项目也安装了gulp,全局安装gulp是为了执行gulp任务,本地安装gulp则是为了调用gulp插件的功能。新建gulpfile.js文件
gulpfile.js是gulp项目的配置文件,是位于项目根目录的普通js文件(其实将gulpfile.js放入其他文件夹下亦可)
示例
//导入工具包 require('node_modules里对应模块')
var gulp = require('gulp'), //本地安装gulp所用到的地方
less = require('gulp-less');
//定义一个testLess任务(自定义任务名称)
gulp.task('testLess', function () {
gulp.src('src/less/index.less') //该任务针对的文件
.pipe(less()) //该任务调用的模块
.pipe(gulp.dest('src/css')); //将会在src/css下生成index.css
});
gulp.task('default',['testLess', 'elseTask']); //定义默认任务 elseTask为其他任务,该示例没有定义elseTask任务
//gulp.task(name[, deps], fn) 定义任务 name:任务名称 deps:依赖任务名称 fn:回调函数
//gulp.src(globs[, options]) 执行任务处理的文件 globs:处理的文件路径(字符串或者字符串数组)
//gulp.dest(path[, options]) 处理完后文件生成路径
gulp方法
添加css相关插件
gulp-less,编译less:cnpm install gulp-less --save-dev
gulp-autoprefixer,添加厂商前缀:cnpm install gulp-autoprefixer --save-dev
gulp-csslint,检查css语法:cnpm install gulp-csslint --save-dev
gule-rename,重命名:cnpm install gulp-rename --save-dev
gulp-clean-css,压缩css:cnpm install gulp-clean-css --save-dev
gulp-watch,有改动时自动编译:cnpm install gulp-watch --save-dev
gulp-livereload,不用刷新页面: cnpm install gulp-livereload --save-dev
gulp-csso,css属性合并: cnpm install gulp-csso --save-dev
没有效果
css语法检查:
通过stylelint来检查css语法,做代码检测工作:
npm install gulp-postcss postcss-reporter stylelint postcss-scss --save-dev
gulp-csslint,检查css语法:cnpm install gulp-csslint --save-dev
,已测试检查不出来错误。
添加js相关插件
添加images相关插件
**cnpm install gulp-imagemin --save-dev**