Gulpfile.js——编译、压缩、合并js和css文件
2016-07-28 17:35
549 查看
gulp 一个入门教程:http://www.ydcss.com/ gulp API文档地址:http://www.gulpjs.com.cn/docs/api/ 我的一个Low版的gulpfile var gulp = require('gulp'); gulpif = require('gulp-if'); sass = require('gulp-sass'); concat = require('gulp-concat'); rename = require('gulp-rename'); cssmin = require('gulp-cssmin'); uglify = require('gulp-uglify'); clean = require('gulp-clean'); gulp.task('clean',function(){ gulp.src(['dist/css/*','dist/js/*'],{read:false}) .pipe(clean()); }); //将bower的库文件对应到指定位置 gulp.task('bowerCopy', function() { //fonts gulp.src('bower_components/bootstrap/fonts/**') .pipe(gulp.dest('vender/fonts')); //js gulp.src('bower_components/jquery/dist/jquery.mim.js') .pipe(gulp.dest('vender/js')); gulp.src('bower_components/jquery/dist/jquery.mim.map') .pipe(gulp.dest('vender/js')); gulp.src('bower_components/angular/angular.min.js') .pipe(gulp.dest('vender/js')); gulp.src('bower_components/angular/angular.min.js.map') .pipe(gulp.dest('vender/js')); gulp.src('bower_components/bootstrap/dist/js/bootstrap.min.js') .pipe(gulp.dest('vender/js')); //css gulp.src('bower_components/bootstrap/dist/css/bootstrap.min.css') .pipe(gulp.dest('vender/css')); gulp.src('bower_components/bootstrap/dist/css/bootstrap-theme.min.css') .pipe(gulp.dest('vender/css')); gulp.src('bower_components/sui/dist/css/sui.min.css') .pipe(gulp.dest('vender/css')); }); //Compile SASS gulp.task('sass-complie', function(){ gulp.src('src/sass/*.scss') .pipe(sass()) .pipe(gulp.dest('dist/css')); }); //转移js gulp.task('src-move',function(){ gulp.src('src/js/*.js') .pipe(gulp.dest('dist/js')); gulp.src('src/css/*.css') .pipe(gulp.dest('dist/css')); }); // //合并js文件 // gulp.task('scripts-concat',function(){ // gulp.src('src/js/*.js') // .pipe(concat('all.js')) // .pipe(gulp.dest('dist/js')) // }); //压缩css文件 gulp.task('css-min',function(){ gulp.src('dist/css/*.css') .pipe(cssmin()) .pipe(rename({suffix:'.min'})) .pipe(gulp.dest('dist/css')); }); //压缩js文件 gulp.task('js-min',function(){ gulp.src('src/js/*.js') .pipe(uglify()) .pipe(rename({suffix:'.min'})) .pipe(gulp.dest('dist/js')); }); gulp.task('default',['bowerCopy','sass-complie','src-move']);
相关文章推荐
- css3中的zoom元素属性值测试
- css3中的zoom元素属性值测试
- 块级元素、行内元素、空元素
- html表格样式
- CSS Border属性solid(实线)使用介绍
- CSS box-flex属性,然后弹性盒子模型简介
- 巧用cssText属性批量操作样式
- CSS学习笔记--基础(二)
- CSS学习笔记:inline和inline-block的区别
- checkbox样式自定义
- HTML篇之CSS样式——CSS水平垂直居中对齐(多种方式)
- css sprites
- 今天发现了css中的一个顺序问题
- HTML学习05-HTML样式(CSS)
- CSS3基础入门学习: 背景制作实例!
- html a链接样式
- WPF样式动画Trigger.EnterActions和Trigger.ExitActions(ExitActions其实可以不做任何事情)
- css-background属性
- HTML篇之CSS样式:<button></button>按钮变成超链接<a></a>的样式
- css中position:fixed;