Gulp任务清单

2017-08-26  本文已影响0人  ZYzan

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

上一篇下一篇

猜你喜欢

热点阅读