1.配置node环境
http://nodejs.cn/download/
node -v
npm -v
2.安装cnpm
npm install cnpm -g --registry=https://registry.npm.taobao.org
cnpm -v
3.新建package.json
package.json是基于nodejs项目必不可少的配置文件,它是存放在项目根目录的普通json文件;
cnpm init
npm init
4.全局安装gulp
$ cnpm install gulp -g
$ npm install --global gulp
gulp -v
5.本地安装gulp插件
全局安装gulp是为了执行gulp任务,本地安装gulp则是为了调用gulp插件的功能
进入你的项目文件路径中后,执行
$ cnpm install gulp --save-dev
$ npm install gulp --save-dev
6.安装gulp-sass插件
(拿该插件进行示例)进入你的项目文件路径中后,执行
cnpm install gulp-sass --save-dev
安装插件:
自动添加css前缀( gulp-autoprefixer )
压缩css( gulp-minify-css )
js代码校验( gulp-jshint )
合并js文件( gulp-concat )
压缩js代码( gulp-uglify )
压缩图片( gulp-imagemin )
自动刷新页面( gulp-livereload )
图片缓存,只有图片替换了才压缩( gulp-cache )
更改提醒( gulp-notify )
清除文件( del )
7.新建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‘]); //定义默认任务 //gulp.task(name[, deps], fn) 定义任务 name:任务名称 deps:依赖任务名称 fn:回调函数 //gulp.src(globs[, options]) 执行任务处理的文件 globs:处理的文件路径(字符串或者字符串数组) //gulp.dest(path[, options]) 处理完后文件生成路径
8.运行gulp
9.通过命令提示符运行gulp任务