gulp学习-gulpfile

Posted kele

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了gulp学习-gulpfile相关的知识,希望对你有一定的参考价值。

安装gulp

假设已经安装了node 和npm (淘宝的cnpm很适合国内使用)。

1、首页全局安装gulp。

1 npm install --global gulp 

2、其次局部安装gulp。(注:局部安装是安装到你项目的根目录,这是很多教程没有清晰表明)

npm install gulp --save-dev

3、在项目根目录下创建一个名为 gulpfile.js 的文件

var gulp = require(‘gulp‘);

gulp.task(‘default‘, function() {
  // 将你的默认的任务代码放在这
});

4、运行gulp。(默认的名为 default 的任务(task)将会被运行,想要单独执行特定的任务(task),请输入 gulp <task> <othertask>)

gulp

 

合并和压缩JS、CSS文件

压缩JS,CSS文件需要引用如下组件:

gulp-minify-css: 压缩css
gulp-jshint: 检查js
gulp-uglify: 压缩js
gulp-concat: 合并文件
gulp-rename: 重命名文件
gulp-clean: 清空文件夹

gulp-notify:提示

安装组件项目目录,通过cd 进入项目的根目录,执行下边的npm安装组件

npm install  gulp-minify-css gulp-jshint gulp-uglify gulp-rename gulp-concat gulp-clean gulp-notify --save-dev

在上述 gulpfile.js 的文件里,写入:

 

// 引入 gulp及组件
var gulp=require(‘gulp‘), //gulp基础库
minifycss=require(‘gulp-minify-css‘), //css压缩
concat=require(‘gulp-concat‘), //合并文件
uglify=require(‘gulp-uglify‘), //js压缩
rename=require(‘gulp-rename‘), //文件重命名
jshint=require(‘gulp-jshint‘), //js检查
notify=require(‘gulp-notify‘); //提示

gulp.task(‘default‘,function(){
gulp.start(‘minifycss‘,‘minifyjs‘);
});

//css处理
gulp.task(‘minifycss‘,function(){
return gulp.src(‘htdocs/kunpeng/static/css/*.css‘) //设置css
.pipe(concat(‘order_query.css‘)) //合并css文件到"order_query"
.pipe(gulp.dest(‘dist/styles‘)) //设置输出路径
.pipe(rename({suffix:‘.min‘})) //修改文件名
.pipe(minifycss()) //压缩文件
.pipe(gulp.dest(‘dist/styles‘)) //输出文件目录
.pipe(notify({message:‘css task ok‘})); //提示成功
});

//JS处理
gulp.task(‘minifyjs‘,function(){
return gulp.src([‘/static/js/juicer-min.js‘,‘/static/js/bootstrap.min.js‘,‘/static/js/bootstrap-datetimepicker.min.js‘,‘/static/js/order_query.js‘]) //选择合并的JS
.pipe(concat(‘order_query.js‘)) //合并js
.pipe(gulp.dest(‘‘dist/js‘)) //输出
.pipe(rename({suffix:‘.min‘})) //重命名
.pipe(uglify()) //压缩
.pipe(gulp.dest(‘dist/js‘)) //输出
.pipe(notify({message:"js task ok"})); //提示
});

以上是关于gulp学习-gulpfile的主要内容,如果未能解决你的问题,请参考以下文章

gulp的使用之gulpfile.js文件的配置

gulp(gulpfile.js)配置文件

gulp-gulpfile.js语法说明

gulpfile

Gulp简介gulp基本使用步骤gulp-cli工具gulpfile.js文件gulp插件

如何在修改 gulpfile.js 文件后自动重启 gulp?