之前一个demo中用的是grunt,照着grunt用到的插件找了下gulp的,总体使用还算顺畅,说实话并不觉得学习成本有降低什么的,差不多。不过也遇到一些问题:

1、gulp.dest()输出目录需要用"./"而不能"/"

2、gulp的jshint有些规则检测不到,而grunt却检测到了,可以用"asi": true测试下。(据说现在大家都用eslint代替jslint,看了下有eslint180条左右的规则,吓cry了好么。)

3、gulp任务有些执行完毕后不会有消息提示,而grunt的插件就友好很多。

gulp.task('uglify', ['jshint'], function() {//...}

package.json

{
"name": "vip.uc108",
"version": "0.1.0",
"devDependencies": {
"del": "^1.2.0",
"gulp": "^3.9.0",
"gulp-concat": "^2.6.0",
"gulp-csscomb": "^3.0.6",
"gulp-eslint": "^1.0.0",
"gulp-file-include": "^0.13.7",
"gulp-imagemin": "^2.3.0",
"gulp-jshint": "^1.11.2",
"gulp-livereload": "^3.8.0",
"gulp-minify-css": "^1.2.0",
"gulp-notify": "^2.2.0",
"gulp-rename": "^1.2.2",
"gulp-ruby-sass": "^1.0.5",
"gulp-uglify": "^1.2.0"
}
}

gulpFile.js

var gulp = require('gulp');

var sass = require('gulp-ruby-sass');
var csscomb = require('gulp-csscomb');
var fileinclude = require('gulp-file-include');
var imagemin = require('gulp-imagemin');
var jshint = require('gulp-jshint');
var livereload = require('gulp-livereload');
var cssmin = require('gulp-minify-css');
var notify = require('gulp-notify');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename'); gulp.task('sass', function() {
return sass('./static/introduce/scss', {
style: "compressed"
})
.on('error', function(err) {
console.error('Error!', err.message);
}).pipe(gulp.dest('./static/introduce/css'))
.pipe(livereload({
start: true
}));
}); gulp.task('css', function() {
return gulp.src(['./static/activity/**/*.css', '!./static/activity/**/*min.css'])
.pipe(csscomb()).
pipe(cssmin()).
pipe(rename(function(path) {
path.basename += ".min";
}))
.pipe(gulp.dest('./static/activity'))
.pipe(livereload({
start: true
}));
}); gulp.task('image', function() {
gulp.src('static/activity/index/img/*')
.pipe(imagemin())
.pipe(gulp.dest('./static/activity/index/img'));
}); gulp.task('jshint', function() {
return gulp.src(['./static/activity/**/*.js', '!./static/activity/**/*.min.js'])
.pipe(jshint('.jshintrc'))
.pipe(jshint.reporter('default'));
}); gulp.task('uglify', ['jshint'], function() {
return gulp.src(['./static/activity/**/*.js', '!./static/activity/**/*.min.js'])
.pipe(uglify({
ext: ".min.js"
}))
.pipe(rename(function(path) {
path.basename += ".min";
}))
.pipe(gulp.dest('./static/activity/'));
}) gulp.task('fileinclude', function() {
return gulp.src('src/html/**/*.html').
pipe(fileinclude({
prefix: '@@',
basepath: '@file'
})).pipe(gulp.dest('./view'));
}); gulp.task('watch', function() {
gulp.watch(['./static/activity/**/*.js', '!./static/activity/**/*.min.js'], ['uglify']);
}); gulp.task('default', ['image', 'fileinclude'], function() {
gulp.src('package.json').pipe(notify("default finished"));
});

关于gulp插件,有空再试下这些~~

gulp-rev

gulp-concat

gulp-sourcemaps

gulp-connect

使用gulp构建工具的更多相关文章

  1. Grunt和Gulp构建工具在Visual Studio 2015中的高效的应用

    Grunt和Gulp构建工具在Visual Studio 2015中的高效的应用 Grunt和Gulp是Javascript世界里的用来做自动压缩.Typescript编译.代码质量lint工具.cs ...

  2. [翻译]在gulp构建工具中使用PostCSS

    前言 PostCSS已经在一段时间内迅速普及,如果你还不知道PostCSS或还没有使用它,我建议你看一下之前的一篇介绍文章<PostCSS简介>,其中介绍了使用PostCSS的基本方法,包 ...

  3. ASP.NET5之客户端开发:Grunt和Gulp构建工具在Visual Studio 2015中的高效的应用

    Grunt和Gulp是Javascript世界里的用来做自动压缩.Typescript编译.代码质量lint工具.css预处理器的构建工具,它帮助开发者处理客户端开发中的一些烦操重复性的工作.Grun ...

  4. gulp构建工具学习汇总

    前端脚手架____gulp配置文件------- https://pan.baidu.com/s/1eSs7COy 1:有了package.json 直接 npm install自动下载相应的npm包 ...

  5. gulp 构建工具

    1. gulp 的简介 gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以 ...

  6. gulp构建工具的安装

    第一步:node.js安装 在gulp安装之前,本机需要node环境.访问http://nodejs.org,然后点击大大的绿色的install按钮,下载完成后直接运行程序.npm会随着安装包一起安装 ...

  7. express+gulp构建项目(二)启动项目和主文件

    这一次整理的内容是项目主文件和如何启动项目. 启动项目 通过nodejs官网的例子https://nodejs.org/docs/latest-v4.x/doc/api/synopsis.html我们 ...

  8. 构建工具--glup如何压缩,丑化代码

    目录 为什么使用 实现 为什么使用 最近在迭代公司的项目,发现项目有如下缺点: 代码没有压缩,js文件,内存大,放在服务器上占空间: 源代码没有混淆或者丑化处理,本公司的程序员写出来的代码和高质量逻辑 ...

  9. 前端打包构建工具gulp快速入门

    因为之前一直有人给我推荐gulp,说他这里好哪里好的.实际上对我来说够用就行.grunt熟悉以后实际上他的配置也不难,说到效率的话确实是个问题,尤其项目大了以后,目前位置遇到的项目都还可以忍受.不过不 ...

随机推荐

  1. BZOJ1206:[HNOI2005]虚拟内存

    我对模拟的理解:https://www.cnblogs.com/AKMer/p/9064018.html 题目传送门:https://www.lydsy.com/JudgeOnline/problem ...

  2. 洛谷【P1561】[USACO12JAN]爬山Mountain Climbing

    我对\(Jhonson\)算法的理解:https://www.cnblogs.com/AKMer/p/9863620.html 题目传送门:https://www.luogu.org/problemn ...

  3. Centos6.5 安装pip

    1.下载 sudo wget https://bootstrap.pypa.io/get-pip.py --no-check-certificate 2.安装  python get-pip.py 参 ...

  4. 【转】Pro Android学习笔记(八):了解Content Provider(下中)

    在之前提供了小例子BookProvider,我们回过头看看如何将通过该Content Provider进行数据的读取. (1)增加 private void addBook(String name , ...

  5. Python selenium 三种等待方法

    1. 强制等待 sleep(xx) 是最简单粗暴的一种办法,不管你浏览器是否加载完了,程序都得等待3秒,3秒一到,继续执行下面的代码,作为调试很有用,不建议总用这种等待方式,严重影响程序执行速度. 代 ...

  6. linux下go的动态链接库的使用

    转自:http://blog.csdn.net/xtxy/article/details/21328143 在使用lua进行服务器端游戏逻辑开发时,发现了LUA的各种不方便的地方,不能编译检查,不能断 ...

  7. ES6学习之函数扩展

    函数默认参数 function test(x = 1, y = 2) { return x + y } test(5, 6) test() 若默认参数在必须参数之前,要想取得默认参数,只有当传入的值为 ...

  8. Git删除master branch中最近一次的提交

    在做一个项目的过程中,需要删除master brach中最近一次的提交,需要在Git repository中删除 采用步骤如下: 1. 在Visual Studio中打开项目,进入到master br ...

  9. LENOVO服务器批量升级BMC固件

    需求:通过服务器远程管理IP批量升级IMM.UEFI固件 工具:asu64.ipmitool.iflash64.cdc_interface.sh 下载:http://pan.baidu.com/s/1 ...

  10. 【hibernate-笔记】

    //1 创建,调用空参构造 Configuration conf = new Configuration().configure(); //2 根据配置信息,创建 SessionFactory对象 S ...