zoukankan      html  css  js  c++  java
  • gulp使用配置

    gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速度更快。如果你还没有使用过前端构建工具,或者觉得gruntjs太难用的话,那就尝试一下gulp吧。

    1.安装gulp

    npm install -g gulp

    2.切换到项目文件夹后创建gulpfile.js  如下:

    var gulp = require('gulp');
    var uglify = require('gulp-uglify');
    var minifycss = require('gulp-minify-css');
    var concat = require('gulp-concat');
    var rename = require('gulp-rename');
    
    gulp.task('minifyjs',function() {
    	return gulp.src([
    		'static/scripts/jquery.js',
    		'static/scripts/moment.js',
    		'static/scripts/socket.io.js',
    		'static/scripts/app.js',
    		'static/scripts/app.request.js',
    		'static/scripts/app.login.js',
    		'static/scripts/app.chat.js',
    		'static/scripts/app.init.js'
    	]).pipe(concat('all.js')).pipe(uglify()).pipe(gulp.dest('static/scripts/'));  
    });
    
    gulp.task('minifycss',function() {
    	return gulp.src([
    		'static/styles/zee.css',
    		'static/styles/app.css'
    	]).pipe(concat('all.css')).pipe(minifycss()).pipe(gulp.dest('static/styles'));
    });
    
    
    gulp.task('default', function() {
    	gulp.start('minifyjs', 'minifycss');
    });
    
    gulp.task('watch',function() {
    	var watcher = gulp.watch([
    		'static/scripts/jquery.js',
    		'static/scripts/moment.js',
    		'static/scripts/socket.io.js',
    		'static/scripts/app.js',
    		'static/scripts/app.request.js',
    		'static/scripts/app.login.js',
    		'static/scripts/app.chat.js',
    		'static/scripts/app.init.js',
    		'static/styles/zee.css',
    		'static/styles/app.css'
    	]);
    	watcher.on('change', function(event) {
    		gulp.start('minifyjs', 'minifycss');
    	});
    });

    3. 安装插件

    npm install gulp-minify-css gulp-uglify gulp-concat gulp-rename gulp-jshint --save-dev

    4.进入终端执行命令

    gulp
    gulp watch #这个是用来监听文件改动的
  • 相关阅读:
    基本数据类型-(字符串_数字_列表_元组_字典_集合)基本数据类型-(字符串_数字_列表_元组_字典_集合)
    python列表基础操作
    Python字符串基本操作
    字符编码
    python基础-循环
    差分
    第一冲刺阶段(第四天)
    第一冲刺阶段(第三天)
    第一冲刺阶段(第二天)
    第一冲刺阶段(第一天)
  • 原文地址:https://www.cnblogs.com/shoestrong/p/5946812.html
Copyright © 2011-2022 走看看