美文网首页
Gulp任务清单

Gulp任务清单

作者: ZYzan | 来源:发表于2017-08-26 09:58 被阅读0次

    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

    相关文章

      网友评论

          本文标题:Gulp任务清单

          本文链接:https://www.haomeiwen.com/subject/lodmdxtx.html