gulp初学
2024-10-10 14:52:23
原文地址:gulp初学
至于gulp与grunt的区别,用过的人都略知一二,总的来说就是2点:
1、gulp的gulpfile.js 配置简单而且更容易阅读和维护。之所以如此,是因为它们的工作方式不同,gulp的流式构建使得gulpfile.js文件写起来并不是像Gruntfile.js一样完成一个个插件的配置那样多。对于这点我的理解还不是很深刻,只能暂时这样做一个比较吧,以后的学习接触多了应该就会深刻的体会到。
2、似乎gulp的上手比grunt更简单一些,或者说一个是轻量级一个是重量级的吧,不能说谁好谁坏,在不同的领域都有各自发挥的特点。
接下来是安装,很简单的2步即可:
1、创建自己的文件夹;
2、如果之前有在全局环境下装过gulp就不必再装了,只需
npm init
这会初始化一个package.json文件而不用手动创建,然后
npm install gulp --save-dev
将gulp安装到本项目文件夹,那么项目的文件将会是这样的
可是一不小心我遇到过这样的问题,不知道是什么原因,麻烦知道大侠的解释下。
我只知道解决办法是先删除node_modules文件夹和package.json文件,然后先执行
npm install gulp
然后再新建package.json,再npm install gulp –save-dev
/*====================================================================*/
gulpfile.js文件结构清晰,罗列一下常用的插件:
- 语法检查 (
gulp-jshint
) - 合并文件 (
gulp-concat
) - 压缩代码 (
gulp-uglify
) - 文件重命名(
gulp-rename
)
npm install gulp-jshint gulp-concat gulp-uglify gulp-rename --save-dev
gulpfile.js文件如下
var gulp = require('gulp');
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename'); // 语法检查
gulp.task('jshint', function(){
return gulp.src('src/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
}); // 编译Sass
// gulp.task('sass', function() {
// gulp.src('./scss/*.scss')
// .pipe(sass())
// .pipe(gulp.dest('./css'));
// }); // 合并文件之后压缩代码
gulp.task('minify', function(){
return gulp.src('src/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('dist'))
.pipe(rename('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest('dist'));
}); //监视文件变化
gulp.task('watch', function(){
gulp.watch('src/*.js', ['jshint', 'minify']);
}); //注册任务
gulp.task('default', ['jshint', 'minify', 'watch']);
多看多查多找,往往会有很多收获。
参考文章:
最新文章
- iOS开发——UI进阶篇(十九)UISearchBar控件简介
- java连接sql server2000/2005
- 【ITOO 2】使用ArrayList时的注意事项:去除多余的null值
- 微信wap开发,页面显示元素不全-微信开发(asp.net)
- 字符串做异或使用union
- c语言_文件操作_FILE结构体解释_涉及对操作系统文件FCB操作的解释_
- 201521123068 《java程序设计》 第10周学习总结
- input中range相关操作
- spring mvc+mybatis+maven集成tkmapper+pagehelper
- 老男孩python学习之作业二---三级菜单
- LOJ #6119. 「2017 山东二轮集训 Day7」国王
- js知识巩固
- Oarcle 入门之注释与关键字
- 如何将你的github仓库部署到github pages(转)
- Wsus 清理的计划任务
- [UGUI]图文混排(一):标签制定和解析
- idea部署tomcat-404错误
- 使用TuShare下载历史逐笔成交数据并生成1分钟线
- [干货]Kaggle热门 | 用一个框架解决所有机器学习难题
- 微信整合的时候 出现这个“redirect_uri 参数错误”
热门文章
- VisualStudio2013 如何打开之前版本开发的(.vdproj )安装项目
- 清空Github上某个文件的历史版本
- 猖獗的假新闻:2017年1月1日起iOS的APP必须使用HTTPS
- LeetCode[3] Longest Substring Without Repeating Characters
- 谈谈一些有趣的CSS题目(二)-- 从条纹边框的实现谈盒子模型
- C++随笔:从Hello World 探秘CoreCLR的内部(1)
- springmvc+bootstrap+jquerymobile完整搭建案例(提供下载地址)
- 餐饮连锁公司IT信息化解决方案一
- Autofac 的点滴
- 分享一款自己改进的皮肤“verdant”.