前端构建大法 Gulp 系列 (四):gulp实战
2016-01-06 09:41
344 查看
前端构建大法 Gulp 系列 (一):为什么需要前端构建
前端构建大法 Gulp 系列 (二):为什么选择gulp
前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gulp专家
前端构建大法 Gulp 系列 (四):gulp实战
前面讲了很多理论,那么这一节我们将讲一些实战的例子
然后再用 npm -v 来确保Node.js 安装正确
src — 源文件:
images
scripts
styles
build — 编译后文件输出到的生产文件夹:
images
scripts
styles
我们先使用npm init来创建类似Nuget package的package.config一样的文件,这样我们就知道项目依赖哪些插件,而且我们不需要把插件提交到代码库,其它程序员只需要使用 npm install 就可以安装所有配置的插件
然后我们需要创建一个gulpfile.js文件,gulp默认是调用这个文件的。
我们在目录下使用
然后添加一个test.js文件到src/scripts下,内容如下
然后运行
看控制台输出就知道我们少了分号。
我们需要安装一下插件
修改gulpfile.js
我们看到gulp已经把我们文件合并了,移除了console.log, 而且进行了压缩。
至此,已经基本上知道gulp怎么使用了,下面展示一些其它的功能的代码
示例代码
至此,大家应该熟悉gulp的使用,尽情去挖掘gulp plugin的宝藏吧。
前端构建大法 Gulp 系列 (二):为什么选择gulp
前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gulp专家
前端构建大法 Gulp 系列 (四):gulp实战
前面讲了很多理论,那么这一节我们将讲一些实战的例子
安装Node.js
先在命令行下输入 node -v 检查一下是否装了node, 如果没有请参考 https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager 安装然后再用 npm -v 来确保Node.js 安装正确
安装 Gulp
我们可以使用npm来安排装Gulp, 为了可以在命令行全局使用,我们安装到全局,另外确保其它的程序员可以使用,我们保存到项目的package.json里npm install gulp -g
创建项目
创建一个文件目录,然后建立对应的文件夹src — 源文件:
images
scripts
styles
build — 编译后文件输出到的生产文件夹:
images
scripts
styles
我们先使用npm init来创建类似Nuget package的package.config一样的文件,这样我们就知道项目依赖哪些插件,而且我们不需要把插件提交到代码库,其它程序员只需要使用 npm install 就可以安装所有配置的插件
然后我们需要创建一个gulpfile.js文件,gulp默认是调用这个文件的。
我们在目录下使用
npm install gulp --save-dev # 这样可以把gulp安装到本地
使用插件
比如我们想检查我们的js文件,那么我们需要安装 gulp-jshint插件npm install gulp-jshint --save-dev
然后添加一个test.js文件到src/scripts下,内容如下
var hi="hello" function sayHello(){ console.log("Jack "+hi) }
jshint 代码检查
然后我们修改gulpfile.js内容如下// include gulp var gulp = require('gulp'); // include plug-ins var jshint = require('gulp-jshint'); // JS hint task gulp.task('jshint', function() { gulp.src('./src/scripts/*.js') .pipe(jshint()) .pipe(jshint.reporter('default')); });
然后运行
gulp jshint
看控制台输出就知道我们少了分号。
代码合并压缩
我们新建一个 ./scripts/b.js, 然后我们把js文件合并然后压缩并输出到./build/scripts/all.js 下,同时移除debug信息我们需要安装一下插件
npm install gulp-concat --save-dev npm install gulp-strip-debug --save-dev npm install gulp-uglify --save-dev
修改gulpfile.js
var gulp = require('gulp'); var concat = require('gulp-concat'); var stripDebug = require('gulp-strip-debug'); var uglify = require('gulp-uglify'); gulp.task('scripts', function() { gulp.src(['./src/scripts/*.js']) .pipe(concat('all.js')) .pipe(stripDebug()) .pipe(uglify()) .pipe(gulp.dest('./build/scripts/')); });
我们看到gulp已经把我们文件合并了,移除了console.log, 而且进行了压缩。
至此,已经基本上知道gulp怎么使用了,下面展示一些其它的功能的代码
npm install gulp-autoprefixer --save-dev npm install gulp-minify-css --save-dev
示例代码
var gulp = require('gulp'); var concat = require('gulp-concat'); var stripDebug = require('gulp-strip-debug'); var uglify = require('gulp-uglify'); var autoprefix = require('gulp-autoprefixer'); var minifyCSS = require('gulp-minify-css'); gulp.task('scripts', function() { gulp.src(['./src/scripts/*.js']) .pipe(concat('all.js')) .pipe(stripDebug()) .pipe(uglify()) .pipe(gulp.dest('./build/scripts/')); }); // CSS concat, auto-prefix and minify gulp.task('styles', function() { gulp.src(['./src/styles/*.css']) .pipe(concat('styles.css')) .pipe(autoprefix('last 2 versions')) .pipe(minifyCSS()) .pipe(gulp.dest('./build/styles/')); }); // default gulp task gulp.task('default', [ 'scripts', 'styles'], function() { // watch for JS changes gulp.watch('./src/scripts/*.js', function() { gulp.run('jshint', 'scripts'); }); // watch for CSS changes gulp.watch('./src/styles/*.css', function() { gulp.run('styles'); }); });
至此,大家应该熟悉gulp的使用,尽情去挖掘gulp plugin的宝藏吧。
相关文章推荐
- jQuery的常用用法集合
- CSS有用的代码片段
- 用jquery实现复选框主从选择
- CSS3——字体font
- 深入理解BootStrap -- 按钮组工具栏9
- 详解jQuery Mobile自定义标签
- 8个超酷炫仿苹果应用的HTML5动画
- 从头认识java-16.4 nio的读与写(ByteBuffer的使用)
- css 透明度设定
- 8个超炫酷仿苹果应用的HTML5动画
- JavaScript类型系统之基本数据类型与包装类型
- webpack配置别名alias出现的错误匹配
- jquery type=radio 更改属性checked 选中 移除 选中
- No grammar constraints (DTD or XML Schema) referenced in the document.
- 深入理解BootStrap-- 下拉菜单8
- 实验十一:jstack使用
- 深入理解BootStrap-- 栅格系统(布局)7
- json对象转化字符串、数组
- 4种JavaScript实现简单tab选项卡切换的方法
- jQuery操作