1.创建任务清单。
清单名称是固定死的gulpfile.js
2.在gulpfile.js当中定义任务。
a)引入本地安装的gulp
b)Var gulp = Require(‘gulp’) gulp是一个对象,此对象可以实现任务清单的定制。
通过一系列的方法来实现
3.定义任务
gulp.task(‘任务名称’,function(){
要执行的任务。
});
想要任务执行。在命令行,输入gulp任务名称。
4.指定任务文件位置(把less转成css)
gulp.task(‘任务名称’,function(){
借助gulp.src来指定任务文件位置。
Gulp.src(‘./src/style/**/*.less’)所有的.less文件。
直接使用命令:npm install gulp-less
});
5.gulp-less插件
借助于gulp插件实现less转css的操作。
gulp插件也是基于node.js写的, 它的安装也是使用npm.
安装完毕后,引用插件。
Var less = require(‘gulp-less’)
gulp.task(‘任务名称’,function(){
Gulp.src(‘./src/style/**/*.less’)所有的.less文件。
.pipe(less())把上一次获取的结果传递给less()
.pipe(gulp.dest(‘转完毕之后,存储的路径’));
});
0.全局安装gulp npm install -g gulp (只需要执行一次,如果已经执行过了,就不需要再去执行。Gulp -v有版本号,代表已经执行过了)
1.创建项目目录(webApp)
2.npm init -f创建一个package.json记录当前项目当中依赖其它插件
3.创建src目录-》进入src创建js/style/view文件夹
4.把gulpfile拷贝到项目根目录当中
5.下载gulp所需要的插件
npm install gulp gulp-less gulp-cssmin gulp-uglify gulp-concat gulp-connect gulp-imagemin open --save-dev
6.执行gulp
Gulp插件
1.gulp-less
2.gulp-cssmin
3.gulp-imagemin
4.gulp-uglify
5.gulp-concat
$ npm install cnpm -g --registry=https://registry.npm.taobao.org
网友评论