码迷,mamicode.com
首页 > 其他好文 > 详细

gulp插件的使用方法

时间:2017-03-01 23:29:05      阅读:353      评论:0      收藏:0      [点我收藏+]

标签:包管理   art   实现   操作   基于   font   less   路径   执行   

gulp插件很多,这里介绍几个比较常用的插件。。。

 

1.gulp-less:用于把less文件编译成css文件。

     因为html文件中不能直接引用less文件(需要导入相关编译js文件配合才行),因此需要想方设法把相应less文件编译成less文件编译成css文件。除了考拉编译外,还可以通过gulp这个自动化构建工具实现less文件的编译。

  在用gulp编译前,首先你需要安装node.js。gulp是基于node.js,理所当然需要安装node.js。npm(node package manager)是node.js的包管理器,用于node插件管理(包括安装,卸载,管理依赖等),在安装gulp的时候,npm已经随着安装成功了。因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常,所以建议使用cnpm。命令提示符执行:

npm install cnpm -g --registry=https://registry.npm.taobao.org

通过上面一步,cnmp可以取代npm了,它们的用法完全一致。

  接着全局安装gulp。全局安装gulp的目的是为了通过它执行gulp任务。命令提示符执行:

cnmp install  gulp -g

命令提示符执行:

gulp -v

出现版本号即为正确安装

  然后本地安装gulp。全局安装gulp是为了执行gulp任务,本地安装gulp则是为了调用gulp插件的功能。命令提示符执行:

cnpm  install  gulp  --save-dev

此时gulp写进项目package.json。

  完成以上步骤以后,你只需要在所在项目里安装gulp-less插件即可。命令提示符执行:

cnpm install  gulp-less --save-dev

等命令执行完成后,你的项目已经具备了编译less文件的能力。然后配置你的gulpfile.js文件。

配置如下:

var gulp = require(‘gulp‘),
less = require(‘gulp-less‘);
//定义一个testLess任务(自定义任务名称)
gulp.task(‘testLess‘, function () {
gulp.src(‘less/*.less‘) //该任务针对的文件
.pipe(less()) //该任务调用的模块
.pipe(gulp.dest(‘css‘)); //将会在css下生成index.css
});
//监听less文件
gulp.task(‘gulpWatch‘,function(){
gulp.watch(‘less/*.less‘,[‘testLess‘]);
});

//同时让默认程序执行一次,可以提高开始执行速度。
gulp.task(‘default‘,[‘testLess‘,‘gulpWatch‘]);
 
    最后在你的当前项目命令行中输入gulp执行即可。你会看到在相关的路径下生成对应的css文件。
2.gulp-clean-css:css文件压缩。
3.gulp-uglify:js压缩
4.gulp-concat:js合并

5.gulp-rename:重命名,给js压缩文件添加.min后缀
6.gulp-jshint:js语法检查

tip:如果以上插件都需要用到,可以使用一行命令提示符搞定,如下:
cnpm install gulp gulp-clean-css gulp-uglify gulp-concat gulp-rename gulp-jshint jshint
gulp-less gulp-sass --save-dev

配置gulpfile.js如下:
var gulp = require(‘gulp‘),
less = require(‘gulp-less‘),
sass = require(‘gulp-sass‘);
minifycss = require(‘gulp-clean-css‘),//css文件压缩
concat = require(‘gulp-concat‘),//js合并
uglify = require(‘gulp-uglify‘),//js压缩
rename = require(‘gulp-rename‘),//重命名 给js压缩文件添加.min前缀
jshint=require(‘gulp-jshint‘);//js语法检查
//定义一个testLess任务(自定义任务名称)
gulp.task(‘testLess‘, function () {
gulp.src(‘less/*.less‘) //该任务针对的文件
.pipe(less()) //该任务调用的模块
.pipe(gulp.dest(‘css‘)); //将会在css下生成index.css
});
//定义一个testScss任务(自定义任务名称)
gulp.task(‘testSass‘, function () {
gulp.src(‘sass/*.scss‘) //该任务针对的文件
.pipe(sass()) //该任务调用的模块
.pipe(gulp.dest(‘css‘)); //将会在css下生成index.css
});

//语法检查
gulp.task(‘jshint‘, function () {
return gulp.src(‘js/*.js‘)
.pipe(jshint())
.pipe(jshint.reporter(‘default‘));
});
//压缩css
gulp.task(‘minifycss‘, function() {
return gulp.src(‘css/*.css‘) //需要操作的文件
.pipe(rename({suffix: ‘.min‘})) //rename压缩后的文件名
.pipe(minifycss()) //执行压缩css
.pipe(gulp.dest(‘allcss‘)); //输出文件夹
});
//压缩,合并js
gulp.task(‘minifyjs‘, function() {
return gulp.src(‘js/*.js‘) //需要操作的文件
.pipe(concat(‘all.js‘)) //合并所有js到all.js
.pipe(gulp.dest(‘alljs‘)) //输出到文件夹alljs下
.pipe(rename({suffix: ‘.min‘})) //rename压缩后的文件名
.pipe(uglify()) //压缩
.pipe(gulp.dest(‘alljs‘)); //输出
});
/*//默认命令,在cmd中输入gulp后,执行的就是这个任务(压缩js需要在检查js之后操作)
gulp.task(‘default‘,[‘jshint‘],function() {
gulp.start(‘minifycss‘,‘minifyjs‘);
});*/

gulp.task(‘gulpWatch‘,function(){
gulp.watch(‘js/*.js‘,[‘minifyjs‘]);
gulp.watch(‘less/*.less‘,[‘testLess‘,‘minifycss‘]);
});
//同时让默认程序执行一次,可以提高开始执行速度。
gulp.task(‘default‘,[‘jshint‘,‘testLess‘,‘testSass‘,‘minifycss‘,‘minifyjs‘,‘gulpWatch‘]);

插件安装完成后在命令行运行gulp即可。


 





 

gulp插件的使用方法

标签:包管理   art   实现   操作   基于   font   less   路径   执行   

原文地址:http://www.cnblogs.com/chencuixin/p/6486623.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!