1.bower的package.json中增加依赖:
"devDependencies": { "bower": "^1.7.7", "gulp": "^3.9.0", "gulp-concat": "^2.6.0", "gulp-htmlmin": "^2.0.0", "gulp-jshint": "^2.0.0", "gulp-minify-css": "^1.2.3", "gulp-rename": "^1.2.2", "gulp-uglify": "^1.5.1" }
2.安装gulp
npm install --global gulp
3.配置gulpfile.js
var gulp = require('gulp'), minifyhtml=require('gulp-htmlmin'), minifycss = require('gulp-minify-css'), concat = require('gulp-concat'), uglify = require('gulp-uglify'), rename = require('gulp-rename'), jshint = require('gulp-jshint'); gulp.task('minifycss', function () { return gulp.src([ 'app/css/xxx.css', 'app/css/xxx.css', 'app/css/xxx.css' ]) .pipe(concat('main.css')) .pipe(gulp.dest('app')) .pipe(rename({suffix: '.min'})) .pipe(minifycss()) .pipe(gulp.dest('app')); }); gulp.task('minifyjs', function () { return gulp.src([ 'app/js/xxx.js', 'app/js/xxx.js', 'app/js/xxx.js' ]) .pipe(concat('main.js')) .pipe(gulp.dest('app')) .pipe(rename({suffix: '.min'})) .pipe(uglify()) .pipe(gulp.dest('app')); }); gulp.task('minifyhtml', function() { var options = { removeComments: true,//清除HTML注释 collapseWhitespace: true,//压缩HTML collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input /> removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input /> removeScriptTypeAttributes: true,//删除<script>的type="text/javascript" removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css" minifyJS: true,//压缩页面JS minifyCSS: true//压缩页面CSS }; return gulp.src('app/*.html') .pipe(minifyhtml(options)) .pipe(gulp.dest('app')); }); gulp.task('default', function () { gulp.start('minifycss', 'minifyjs','minifyhtml'); });
4.运行gulp
相关推荐
口香糖备忘单 一张gulp的。 快速下载 用法 打印PDF。 将其放在您电脑旁边的墙上:) 示例代码 指令 全局安装: $ npm install -g gulp 安装本地: $ npm install --save-dev gulp $ npm install --save-dev gulp-...
前端备忘单:备忘单(HTML,CSS,JS,Git,Gulp等)的集合,可满足您的前端开发需求和参考
表情符号助手表情苍白的表情符号备忘单扩展名,也是一本书签。发展历程由于当今大多数浏览器都允许使用HTML / CSS / JS编写插件,因此构建跨浏览器扩展非常容易,尤其是当您对低级浏览器功能不感兴趣时。建造...
其中包含一个简单的演示,使您可以比较斐波那契序列的时间,该时间是由直接递归计算出来的,并结合使用递归和备忘录来避免重新计算f(n)的值。 启动Web服务器: [rule146@rule146: fib-nodejs]$ python -m ...
变形杆菌 简单的可搜索备忘单用法只需访问我们的项目页面添加秘籍和表格将您的作弊添加到 /input 并向我们发送请求请求。格式 # ID Title## chapterSome cheat description$ A command starts with a '$' and a ...
准备使用: 吞咽 Babelify 浏览器 乙烯基源流 React 惊讶 入门 $ npm install $ gulp 备忘录 $ npm install --save react flummox $ npm install --save-dev babelify browserify gulp vinyl-source-stream
资源:用于分析,数据库和开发的备忘单
React骨架开发gulp或gulp watch建造npm run build 服务(使用示例) npm -g install simple-http-servercd react-skeletonnserver>> http://localhost:8000/public/index.html备忘录使用coffee typescript等时,创建...
我选择了gulp.js 表情符号 :smiling_face_with_sunglasses: 支持在此处找到表情符号:表情符号备忘单可以用来: :check_mark_button: 标签 :check_mark_button: 头衔 :check_mark_button: 帖子/ .Content 语法高亮而...
模块备忘browserify gulp gulp-uglify react reactify vinyl-buffer vinyl-source-stream提交历史2015-07-09:将数据从组件文件分离到comments.json 2015-07-09:修改后的Comment组件对应于markdown 2015-07-09:从...
备忘录模式 迭代器模式 解释器模式 :collision:数据结构与算法 点击关闭/打开所有内容 :comet:源码学习 博客 :ant:数据结构与算法 :spider:设计模式 :honeybee:Javascript 语言标准 函数式编程 :butterfly:Nodejs ...