首页 > 代码库 > gulp使用配置
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.进入终端执行命令
gulpgulp watch #这个是用来监听文件改动的
gulp使用配置
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。