gulp
来源:互联网 发布:秦王凿牛窄轨铁路知乎 编辑:程序博客网 时间:2024/06/05 00:29
packagejson最简写法
{ "name": "随便命名", "version": "1.0.0", "devDependencies": { "browser-sync": "^2.12.8", "chokidar": "^1.5.1", "del": "^2.2.0", "event-stream": "^3.3.2", "gulp": "^3.9.1", "gulp-angular-templatecache": "^1.8.0", "gulp-concat": "^2.6.0", "gulp-minify-css":"^1.2.4", "gulp-sass": "^2.3.1", "gulp-uglify": "^1.5.3" }}
gulp脚本编写
var gulp = require('gulp');var concat = require('gulp-concat'); //合并文件var minifycss = require('gulp-minify-css'); //压缩cssvar templateCache = require('gulp-angular-templatecache'); //压缩 ng模板var uglify = require('gulp-uglify'); // 压缩 代码var es = require('event-stream'); // 事件插件var del = require("del"); //删除var browserSync = require("browser-sync"); // 自动刷新var chokidar = require('chokidar'); //监听//压缩依赖的js代码 gulp.task('libScripts', function() { var scriptsGlob = ['app/lib/jQuery/*.js', 'app/lib/bootstrap/*.js', 'app/lib/angular/angular.min.js', 'app/lib/**/*.js' ]; return gulp.src(scriptsGlob) .pipe(uglify()) //压缩 js代码 .pipe(concat('lib.min.js')) // 拼接成 一个js .pipe(gulp.dest('dist/js')) //输出到指定目录});//压缩ng代码gulp.task('ngScripts', function() { var scriptsGlob = [ '!app/lib/**/*.js', 'app/scripts/app.js', 'app/**/*.js' ]; var tpl = gulp.src('app/**/*.html') .pipe(templateCache()); /*return gulp.src(scriptsGlob) .pipe(uglify()) //压缩 js代码 .pipe(concat('business.min.js')) // 拼接成 一个js .pipe(gulp.dest('dist/js')) //输出到指定目录*/ return es.merge(es.merge( gulp.src(scriptsGlob), tpl )// .pipe(uglify())// .pipe(concat('business.min.js')) .pipe(concat('business.js'))) .pipe(gulp.dest('dist/js'));});//输出HTMLgulp.task("distHtml",function(){ return gulp.src("app/index.html") .pipe(gulp.dest('dist'))});//压缩cssgulp.task('minifyCss', function() { var cssSrc = [ 'app/css/bootstrap/**/*.css', 'app/css/Font-Awesome/**/*.css', 'app/css/system.css', 'app/css/**/*.css' ]; return gulp.src(cssSrc) //压缩的文件 .pipe(minifycss()) //执行压缩 .pipe(concat('all.min.css')) // 拼接成 一个js .pipe(gulp.dest('dist/css')); //输出到指定目录});//清空 输出gulp.task('clean', function(cb) { del(['dist'], cb);});//gulp运行的时候gulp.task("default", ['init']);gulp.task('watch',['watch:css','watch:ng','watch:html']);gulp.task("init", ['libScripts','distHtml', 'ngScripts', 'minifyCss']);gulp.task('browser-sync', ["init","watch"], function() { browserSync.init({ server: { baseDir: ["app"] }, middleware: [function(req, res, next) { next(); }], port: 80 });});//监听cssgulp.task("watch:css", function() { var cssSrc = [ 'app/css/bootstrap/**/*.css', 'app/css/Font-Awesome/**/*.css', 'app/css/system.css', 'app/css/**/*.css' ]; gulp.watch(cssSrc,['minifyCss'], browserSync.reload);});//监听js和html模板gulp.task("watch:ng", function() { var jsSrc = [ '!app/lib/**/*.js', 'app/scripts/app.js', 'app/**/*.js' ]; var tplSrc = 'app/**/*.html'; gulp.watch(jsSrc,['ngScripts'], browserSync.reload); gulp.watch(tplSrc,['ngScripts'], browserSync.reload);});//监听htmlgulp.task("watch:html", function() { var htmlSrc = ['app/index.html']; gulp.watch(htmlSrc,['distHtml'], browserSync.reload);});process.on('uncaughtException', function(e){console.log(e.stack)})
0 0
- gulp
- Gulp
- gulp
- Gulp
- gulp
- gulp
- gulp
- gulp
- gulp
- gulp
- gulp
- Gulp
- gulp
- Gulp
- gulp
- gulp
- gulp
- gulp
- struts2 新增请求无法访问到Action中的方法
- 为什么我的JVM能实际使用的内存比-Xmx指定的少?
- Oracle 创建索引语法
- [Android 知识点] RxAndroid的使用(三)
- {题解}[jzoj3806]【NOIP2014模拟8.24】小X 的道路修建
- gulp
- 为什么要在服务层设计读写分离
- javascript2048游戏开发练习笔记
- App全局弹框提示的问题
- 聊聊JVM的年轻代
- Android界面性能调优手册
- 配置java备忘
- UVa 620 - Cellular Structure
- 【JZOJ 3808】道路值守