这里是gulp入门的一些操作,实现了编译sass文件、压缩、合并、添加版本号等基本功能。

友情提示,如果npm出现无法下载可以安装 cnpm。在安装完Nodejs 后

  1. npm install cnpm -g --registry=https://registry.npm.taobao.org

完成后可

  1. cnpm -v

查看安装结果

1.安装Nodejs

选择合适的版本下载Nodejs

2.安装全局gulp

  1. npm install --global gulp-cli

3.进入项目目录(之后的操作全是在此目录下进行)

  1. cd desktop/myprogram

4.初始化package.json

  1. npm init

5.安装项目gulp

  1. npm install --save-dev gulp

6.安装插件

  1. npm install gulp-htmlmin gulp-imagemin imagemin-pngcrush gulp-jshint jshint  gulp-uglify gulp-notify gulp-useref gulp-load-plugins  gulp-clean-css gulp-sass  gulp-if gulp-users gulp-rev gulp-rev-collector  —save-dev

7.新建gulpfile.js

  1. var gulp = require('gulp');
  2. gulp.task('default', function() {
  3. // place code for your default task here
  4. });

8.测试

在终端输入命令

  1. gulp

9.附上index.html(压缩css、js部分) 、package.json 和 gulpfile.js

index.html

  1. <link rel="shortcut icon" href="images/favicon.ico">
  2. <!-- build:css lib/main.css -->
  3. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  4. <link rel="stylesheet" type="text/css" href="css/main.css">
  5. <link rel="stylesheet" type="text/css" href="css/common.css">
  6. <!-- endbuild -->
  7. <!-- build:js lib/main.js -->
  8. <script type="text/javascript" src="js/jquery.min.js"></script>
  9. <script type="text/javascript" src="js/bootstrap.min.js"></script>
  10. <script type="text/javascript" src="js/route.js"></script>
  11. <script type="text/javascript" src="js/main.js"></script>
  12. <!-- endbuild -->

package.json

  1. "devDependencies": {
  2. "del": "^2.2.0",
  3. "gulp": "^3.9.1",
  4. "gulp-clean-css": "^2.0.8",
  5. "gulp-concat": "^2.6.0",
  6. "gulp-htmlmin": "^2.0.0",
  7. "gulp-if": "^2.0.1",
  8. "gulp-imagemin": "^3.0.1",
  9. "gulp-jshint": "^2.0.1",
  10. "gulp-load-plugins": "^1.2.4",
  11. "gulp-notify": "^2.2.0",
  12. "gulp-rev": "^7.0.0",
  13. "gulp-rev-collector": "^1.0.3",
  14. "gulp-sass": "^2.3.1",
  15. "gulp-sequence": "^0.4.5",
  16. "gulp-uglify": "^1.5.3",
  17. "gulp-useref": "^3.1.0",
  18. "imagemin-pngcrush": "^5.0.0",
  19. "jshint": "^2.9.2"
  20. }

gulpfile.js

  1. 'use strict';
  2. var gulp = require('gulp'),
  3. $ = require("gulp-load-plugins")(),
  4. sass = require("gulp-sass"),
  5. rev = require("gulp-rev"),
  6. del = require('del');
  7. gulp.task('default', function() {
  8. gulp.run('styles', 'jshint');
  9. gulp.watch('src/styles/*.scss', ['styles']);
  10. });
  11. gulp.task('build', $.sequence('cpfiles', 'useref', 'cphtml', 'revfile',
  12. 'revhtml', 'delfiles', 'img','htmlmin'));
  13. gulp.task('htmlmin', function() {
  14. return gulp.src(['dist/*/*.html', 'dist/*.html'])
  15. .pipe($.htmlmin({collapseWhitespace: true}))
  16. .pipe(gulp.dest('dist/'))
  17. .pipe($.notify({ message: 'htmlmin task done' }));
  18. });
  19. gulp.task('delfiles', function(){
  20. del([
  21. 'dist/js',
  22. 'dist/css',
  23. 'dist/styles',
  24. 'dist/lib/index.html',
  25. 'dist/lib/rev-manifest.json'
  26. ]);
  27. })
  28. gulp.task('revhtml', function () {
  29. return gulp.src(['dist/lib/rev-manifest.json', 'dist/lib/index.html'])
  30. .pipe($.revCollector())
  31. .pipe(gulp.dest('dist/'))
  32. .pipe($.notify({ message: 'revhtml task done' }));
  33. });
  34. gulp.task('revfile', function(){
  35. return gulp.src(['dist/lib/*.css', 'dist/lib/*.js'])
  36. .pipe($.rev())
  37. .pipe(gulp.dest('dist/lib/'))
  38. .pipe(rev.manifest({
  39. path: 'rev-manifest.json',
  40. merge: true
  41. }))
  42. .pipe(gulp.dest("dist/lib/"))
  43. .pipe($.notify({ message: 'revfile task done' }));
  44. });
  45. gulp.task('cphtml', function(){
  46. return gulp.src('dist/*.html')
  47. .pipe(gulp.dest('dist/lib/'))
  48. .pipe($.notify({ message: 'copyhtml task done' }));
  49. })
  50. gulp.task('useref', function() {
  51. return gulp.src('dist/*.html')
  52. .pipe($.useref())
  53. .pipe($.if('*.js', $.uglify()))
  54. .pipe($.if('*.css', $.cleanCss({compatibility: 'ie8'})))
  55. .pipe(gulp.dest('dist/'))
  56. .pipe($.notify({ message: 'useref task done' }));
  57. });
  58. gulp.task('cpfiles', ['styles'], function(){
  59. return gulp.src(['src/*/*','src/*'])
  60. .pipe(gulp.dest('dist/'))
  61. .pipe($.notify({ message: 'copyfiles task done' }));
  62. })
  63. gulp.task('img', function() {
  64. return gulp.src('dist/images/*.*')
  65. .pipe($.imagemin({
  66. progressive: true,
  67. svgoPlugins: [{removeViewBox: false}],
  68. use: [$.imagemin()]
  69. }))
  70. .pipe(gulp.dest('dist/images/'))
  71. .pipe($.notify({ message: 'img task done' }));
  72. });
  73. gulp.task('styles', function(){
  74. return gulp.src('src/styles/*.scss')
  75. .pipe(sass().on('error', sass.logError))
  76. .pipe(gulp.dest('src/css'))
  77. .pipe($.notify({ message: 'sass task done' }));
  78. })
  79. gulp.task('jshint', function() {
  80. return gulp.src(['src/js/main.js','src/js/route.js'])
  81. .pipe($.jshint())
  82. .pipe($.jshint.reporter('default'))
  83. .pipe($.notify({ message: 'jshint task done' }));
  84. });
  85. gulp.task('clean', function(){
  86. del([
  87. 'dist/'
  88. ]);
  89. })

文件结构,上层为 desktop/myprogram/

gulp入门与一些基本设置的更多相关文章

  1. Gulp入门教程(转载)

    本人转载自: Gulp入门教程

  2. (转)前端构建工具gulp入门教程

    前端构建工具gulp入门教程 老婆婆 1.8k 2013年12月30日 发布 推荐 10 推荐 收藏 83 收藏,20k 浏览 本文假设你之前没有用过任何任务脚本(task runner)和命令行工具 ...

  3. 《Gulp 入门指南》 : 使用 gulp 压缩 JS

    <Gulp 入门指南> : 使用 gulp 压缩 JS 请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 访问论坛获取帮助 压缩 js 代码可降低 js 文件大小,提高页面打 ...

  4. Gulp入门与解惑

    Gulp简介 Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务.Gulp.js是基于 Node.js构建的,利用Node.js流的威力,你可以快速构建项目. 安装 ...

  5. gulp 入门使用

      gulp 入门使用 使用场景 相信大家在传统的开发模式下 都是 html + css + js 然后静态文件不经过任何处理 部署到服务器,这样会有很多漏洞例如: 1.在网站上查看F12 就可以看到 ...

  6. 【转】Gulp入门基础教程

    Gulp入门基础教程 原文在此 前言最近流行前端构建工具,苦于之前使用Grunt,代码很难阅读,现在出了Gulp, 真是摆脱了痛苦.发现了一篇很好的Gulp英文教程,整理翻译给大家看看. 为什么使用G ...

  7. gulp入门演练

    一直想学习下gulp看了蛮多资料,然后总是感觉是是而非,突然开窍了,把自己学会的过程给大家分享下,入门超级简单的 gulp安装 安装gulp 如果参数-g 表示全局安装 $ npm install g ...

  8. 前端小白的gulp入门

    gulp新手入门 全局安装 cnpm install -g gulp 本地安装cnpm install gulp -D 如果项目没有package.json,记得npm init 安装插件cnpm i ...

  9. gulp入门学习教程(入门学习记录)

    前言 最近在通过教学视频学习angularjs,其中有gulp的教学部分,对其的介绍为可以对文件进行合并,压缩,格式化,监听,测试,检查等操作时,看到前三种功能我的心理思想是,网上有很多在线压缩,在线 ...

随机推荐

  1. Java 基础【12】 日期类型

    java api中日期类型的继承关系 java.lang.Object --java.util.Date --java.sql.Date --java.sql.Time --java.sql.Time ...

  2. 用JSON-server模拟REST API

    来源于: 用JSON-server模拟REST API(一) 安装运行 用JSON-server模拟REST API(二) 动态数据 用JSON-server模拟REST API(三) 进阶使用 在开 ...

  3. aop:declare-parents注解

    http://www.blogjava.net/jackfrued/archive/2010/02/27/314060.html <aop:aspect> <aop:declare- ...

  4. 配置eclipse插件

    http://blog.csdn.net/zhangyabinsky/article/details/7043435

  5. linux显示桌面快捷键设置

    2013-01-06 10:31:52    Ubuntu显示桌面Indicator  IN: LINUX :-) HOT: 1,246 ℃  18十2011   www.2cto.com   大家一 ...

  6. HDUOJ--Strange fuction

    Strange fuction Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)T ...

  7. 分布式缓存技术memcached学习系列(五)—— memcached java客户端的使用

    Memcached的客户端简介 我们已经知道,memcached是一套分布式的缓存系统,memcached的服务端只是缓存数据的地方,并不能实现分布式,而memcached的客户端才是实现分布式的地方 ...

  8. Fusion Tables 图层用于呈现 Google Fusion Tables 中包含的数据

    Google Maps API 允许您使用 FusionTablesLayer 对象将 Google Fusion Tables 中包含的数据呈现为地图上的图层.Google Fusion Table ...

  9. 【js】indexOf()

    /** **位置方法indexOf()和lastIndexOf() **这两个方法都接收两个参数:要查找的项和(可选的)表示查找起点位置的索引 **indexOf()方法从数组的开头(位置0)开始向后 ...

  10. Hive学习之函数DDL和Show、Describe语句

    创建/删除函数 创建暂时函数 以下的语句创建由class_name实现的暂时函数,该函数被创建后仅仅能够在当前会话中使用.会话结束后函数失效. 实现函数的类能够是Hive类路径中的随意类.能够使用Ad ...