码迷,mamicode.com
首页 > 其他好文 > 详细

构建gulp环境

时间:2017-09-16 16:10:49      阅读:193      评论:0      收藏:0      [点我收藏+]

标签:func   span   还需要   blog   run   任务   gulp   监听文件   src   

第一步:

  node环境下全局安装gulp

    npm install gulp -g

第二步:

  项目文件,并自动生成package.json文件

    npm init

第三步:

  安装需要的插件

    npm install gulp gulp-connect gulp-concat gulp-minify-css gulp-uglify gulp-sass --save-dev

    gulp (本地gulp)

    gulp-connect (用于开启本地服务)

    gulp-concat (用户打包多个文件)

    gulp-uglify (用于压缩js文件)

    gulp-minify-css (用户压缩css文件)

    gulp-sass (用于编译scss文件)

    --save-dev (理解为开发时需要依赖的)

    --save (理解为发布后还需要依赖的)

第四步:

  创建gulpfile.js文件

//导入工具包
var gulp = require(‘gulp‘);
var concat = require(‘gulp-concat‘);
var connect = require(‘gulp-connect‘);
var uglify = require(‘gulp-uglify‘);
var minifyCss = require(‘gulp-minify-css‘);


//合并压缩我的js文件到build目录
gulp.task(‘myjs‘, function() {
    gulp.src(‘./web/**/*.js‘)
        .pipe(concat(‘myall.min.js‘))
        .pipe(uglify())
        .pipe(gulp.dest(‘./build‘))
});

//合并压缩我的css文件到build目录
gulp.task(‘mycss‘, function() {
    gulp.src(‘./web/**/*.css‘)
        .pipe(concat(‘myall.min.css‘))
        .pipe(minifyCss())
        .pipe(gulp.dest(‘./build‘))
});

//连接服务
gulp.task(‘connect‘, function() {
    connect.server({
        port: 8081
    });
});

// 默认任务
gulp.task(‘default‘, function(){
    gulp.run(‘connect‘, ‘watch‘, ‘mycss‘, ‘myjs‘)
});

// 监听文件变化
gulp.task(‘watch‘, function() {
    gulp.watch(‘./web/**/*.js‘, function(){
        gulp.run(‘myjs‘);
    });
    gulp.watch(‘./web/**/*.css‘, function(){
        gulp.run(‘mycss‘);
    });
});

 

  

构建gulp环境

标签:func   span   还需要   blog   run   任务   gulp   监听文件   src   

原文地址:http://www.cnblogs.com/tqt--0812/p/7531221.html

踩
(0)
赞
(0)
   
举报
评论 一句话评论(0)
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!