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
原创粉丝点击