2019独角兽企业重金招聘Python工程师标准>>>
打开终端全局安装 gulp 模块
npm install -g gulp //全局安装 gulp(轻量级自动化项目构建工具)
cd 进入到项目文件夹,可以到看到 package.json 配置文件:
{ "name": "ionic-project", "version": "1.0.0", "description": "An Ionic project", "dependencies": { "gulp": "^3.5.6", "gulp-sass": "^0.7.1", // sass支持
"gulp-concat": "^2.2.0", // 合并文件
"gulp-minify-css": "^0.3.0", // 压缩css
"gulp-rename": "^1.2.0" // 文件重命名
}
}
首先 cd 到自己的项目目录
执行命令:npm install // 通过npm安装依赖,gulp的一些plugins就搞定了。
如果配置的 web 服务器需要自动刷新,可以在上面加上 "gulp-connect" 插件,或者直接执行命令安装:npm install gulp-connect.
配置 gulpfile.js
这是gulp的配置文件,我们现在只要对它进行一下配置就可以运行项目了,代码如下,已经加入注释:
// 引入gulp
var gulp = require('gulp');
// 引入gulp-plugins
var concat = require('gulp-concat');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');
var connect = require('gulp-connect');
// 定义sass文件路径var paths = {
sass: ['./scss/**/*.scss']
};
/*
创建sass任务,它会监听./scss/ionic.app.scss里面的文件变化,然后编译为css到./www/css/目录.
然后进行css压缩,将压缩后的文件重命名为min.css结尾,然后还是放到./www/css/目录下。
*/
gulp.task('sass', function(done) {
gulp.src('./scss/ionic.app.scss')
.pipe(sass())
.pipe(gulp.dest('./www/css/'))
.pipe(minifyCss({
keepSpecialComments: 0
}))
.pipe(rename({ extname: '.min.css' }))
.pipe(gulp.dest('./www/css/'))
.on('end', done);
});
//watch任务,监听文件变化gulp.task('watch', function() {
gulp.watch(paths.sass, ['sass']);
gulp.watch(['./www/*.html'], ['html']);
});
// connect任务,监听项目变化后自动刷新项目
gulp.task('connect', function(){
connect.server({
port: 3000,
root:'www',
livereload: true
});
});
gulp.task('html', function () {
gulp.src('./www/*.html')
.pipe(connect.reload());
});
// default默认任务,从此开始执行
gulp.task('default', ['connect','sass','watch']);
/**
* Created by Jack on 15/10/25.
*/
var gulp = require('gulp');
var connect = require('gulp-connect');
gulp.task('watch', function(){
gulp.watch(['./www/*.html'], ['html']);
});