流行得前端构建工具比较,以及gulp配置
前端现在三足鼎立的构建工具(不算比较老的ant,yeoman),非fis,grunt,gulp莫属了。
fis用起来最简单,我打算自己得项目中使用一下fis.
先说一下gulp安装吧。
第一步:安装node和npm,搭建node环境。
访问 http://nodejs.org。npm会随着安装包一起安装。
确保node 和npm安装,如果如下两个命令行没有正确安装得话,说明node没有安装正确。
$ node -v
v0.12.6 $ npm -v
2.11.2
第二步:安装gulp
认识npm:NPM是基于命令行的node包管理工具,它可以将node的程序模块安装到项目中,在它的 官网 中可以查看和搜索所有可用的程序模块。
sudo npm install -g gulp
- sudo是以管理员身份执行命令,一般会要求输入电脑密码
npm是安装node模块的工具,执行install命令
-g表示在全局环境安装,以便任何项目都能使用它
- 最后,gulp是将要安装的node模块的名字
- 完成后,在终端(Terminal)输入命令行,查看gulp有没有安装成功
yangh1deMac-mini:static_global yangh1$ gulp -v
CLI version 3.9.0Local version 3.9.0 - 我们需要将gulp安装到项目本地
npm install —-save-dev gulp
这里,我们使用
—-save-dev
来更新package.json文件,更新devDependencies
值,以表明项目需要依赖gulp。Dependencies
可以向其他参与项目的人指明项目在开发环境和生产环境中的node模块依懒关系,想要更加深入的了解它可以看看 package.json文档 。
第三步:新建Gulpfile文件,运行gulp
安装好gulp后我们需要告诉它要为我们执行哪些任务,首先,我们自己需要弄清楚项目需要哪些任务。
- 检查Javascript
- 编译Sass(或Less之类的)文件
- 合并Javascript
- 压缩并重命名合并后的Javascript
安装依赖,提醒下,如果以上命令提示权限错误,需要添加 sudo
再次尝试。
npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename --save-dev
新建gulpfile文件
现在,组件都安装完毕,我们需要新建gulpfile文件以指定gulp需要为我们完成什么任务。
gulp只有五个方法: task
, run
, watch
, src
,和 dest
,在项目根目录新建一个js文件并命名为 gulpfile.js ,把下面的代码粘贴进去://// 引入 gulp
var gulp = require('gulp'); // 引入组件
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename'); // 检查脚本
gulp.task('lint', function() {
gulp.src('./js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
}); // 编译Sass
gulp.task('sass', function() {
gulp.src('./scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('./css'));
}); // 合并,压缩文件
gulp.task('scripts', function() {
gulp.src('./js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('./dist'))
.pipe(rename('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist'));
}); // 默认任务
gulp.task('default', function(){
gulp.run('lint', 'sass', 'scripts'); // 监听文件变化
gulp.watch('./js/*.js', function(){
gulp.run('lint', 'sass', 'scripts');
});
});
1.引入组件:我们引入了核心的gulp和其他依赖组件,接下来,分开创建lint, sass, scripts 和 default这四个不同的任务。
2.Lint:Link任务会检查 js/
目录下得js文件有没有报错或警告。
3.sass任务:Sass任务会编译 scss/
目录下的scss文件,并把编译完成的css文件保存到/css
目录中。
4.Scripts任务:scripts任务会合并 js/
目录下得所有得js文件并输出到 dist/
目录,然后gulp会重命名、压缩合并的文件,也输出到 dist/
目录。
5.defaul任务:我们创建了一个基于其他任务的default任务。使用 .run()
方法关联和运行我们上面定义的任务,使用 .watch()
方法去监听指定目录的文件变化,当有文件变化时,会运行回调定义的其他任务。
多看一些
gulp和grunt比较不错得文章:http://www.jianshu.com/p/3779f708f5d7/ 我觉得写得比较清晰。
https://segmentfault.com/a/1190000002491282
http://www.ydcss.com/archives/18 目前发现写得最简单清晰gulp入门教程
Gruntfile维护起来那么困难,有几个原因:
配置和运行分离
程序员都知道,变量的声明和使用挨在一起,最方便理解和修改。但Gruntfile里,配置Task和调用它们的地方离得很远,极大地增加了心智负担。每个插件做的事太多
每个Task的结果必须写到磁盘文件,另一个Task再读,损害性能倒是小事,更麻烦的是让整个过程变复杂了。
就像一个个小作坊,来料加工又返回给客户,这中间的沟通成本、出错机会都大大增加。配置项过多
做事多了,配置项自然也多。至少输入和输出的位置得配吧。每个插件的配置规则还不尽相同。用每个插件,都得去学习一番。
Gulp是怎么解决的:
配置和运行分离
code over configuration,直接就在调用的地方配置。每个插件做的事太多
单一职责,依靠组合来发挥作用。就像一条自动化生产线,上一道工序的产出直接交给下一步,效率不要太高。配置项过多
既然大家都遵循同一个协议,很多配置就不需要了。
流行得前端构建工具比较,以及gulp配置的更多相关文章
- 前端构建工具之gulp(一)「图片压缩」
前端构建工具之gulp(一)「图片压缩」 已经很久没有写过博客了,现下终于事情少了,开始写博吧 今天网站要做一些优化:图片压缩,资源合并等 以前一直使用百度的FIS工具,但是FIS还没有提供图片压缩的 ...
- 前端构建工具的用法—grunt、gulp、browserify、webpack
随着前端项目的飞速发展,项目越来越大.文件越来越多,前端工程化的工具也越来越多.下面介绍目前最流行的四种构建工具——grunt.gulp.browserify.webpack 所有的构建工具都是基于N ...
- 前端构建工具之争——Webpack vs Gulp 谁会被拍死在沙滩上
.table tr>td:nth-child(1){width: 2em !important;padding-left: .6rem !important;padding-right: .6r ...
- 前端构建工具gulp使用
前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gulp中文文档 https://g ...
- 前端构建工具gulp介绍
2016年3月3日 10:46:08 晴 前端构建工具gulpjs的使用介绍及技巧 gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简 ...
- Gulp.js----比Grunt更易用的前端构建工具
Gulp.js----比Grunt更易用的前端构建工具 Grunt一直是前端构建工具,然而他也不是毫无缺陷的,gulp的作者 Eric Schoffstall 在他介绍 gulp.js 的 prese ...
- Gulp, 比Grunt更好用的前端构建工具
Gulp, 比Grunt更好用的前端构建工具 本文主要从两个方面介绍Gulp:一,Gulp相对于Grunt的优势: 二,Gulp的安装和使用流程 Gulp相对于Grunt的优势 gulp.js 的作者 ...
- 前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍
前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...
- (转载)前端构建工具gulp使用
前端构建工具gulp使用 前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gulp中 ...
随机推荐
- thinkCMF的使用!
第一次使用 thinkCMF:在此记录下使用的过程! 后台登录: http://thinkcmf.fyz.com/public/admin 前台:控制器 前台控制器的模板:
- angularJS表达式详解!
angularJS的表达式很像Javascript里的表达式:它可以包含文字,运算符和变量: angularJS 表达式: - 数字:{{100+100}} - 字符串:{{‘hello’+'angu ...
- pta 习题集5-6 堆栈操作合法性
假设以S和X分别表示入栈和出栈操作.如果根据一个仅由S和X构成的序列,对一个空堆栈进行操作,相应操作均可行(如没有出现删除时栈空)且最后状态也是栈空,则称该序列是合法的堆栈操作序列.请编写程序,输入S ...
- OGG双向复制
注意:在进行如下配置之前,先在源数据库(原来的目标数据库)端添加辅助的redolog配置: 1.SQL> alter database add supplemental log dat ...
- Oracle性能优化之表压缩及并行提高效率的测试
1.制作测试表 create table t1 as select * from FW_T_GTXLOG insert into t1 select * from t1; create table t ...
- Django - 路由层(URLconf)
一.django 静态文件配置 /mysite1/settings.py STATIC_URL = '/static/' STATICFILES_DIRS = [ os.path.join(BASE_ ...
- Flask系列之源码分析(二)
应用技术点 python之__setattr__ python之threading.local python之偏函数 flask源码上下文管理 1.综述过程 将请求对象压入栈 1.请求进入 __cal ...
- 上传文件小的oK,大一点的传不了,显示 (failed) net::ERR_CONNECTION_RESET
我很确定已经修改了php.ini中的文件上传限制,文件权限可写. 修改php.ini file_uploads = on ;是否允许通过HTTP上传文件的开关.默认为ON即是开 upload_tmp_ ...
- postman设置环境变量,字段值经过json转换后数值字节长度超过上限的问题
在使用Tests进行环境变量的设置时,遇到这么一种情况,在返回的responseBody中的userId字段,字段返回的是数值类型,再经过json转换之后,发现保存的值跟接口返回的值不一致:如下图: ...
- 零碎收集cocos知识
Configuration类 返回环境变量 local function menuCallback(tag, pSender) printInfo("selected item tag:%d ...