深奥的前端开发框架,今天总算“摸熟”了。。。
还有什么grunt、fis 等gulp熟了后再来研究。
以下package.json 项目下载后,这文件自动生成的,不需要管他。具体项目怎么建,看我其他文章。
{ "name": "txbManager", //项目名称 "version": "1.0.0", "description": "txbManager: An Ionic project", "dependencies": { "gulp": "^3.5.6", "gulp-sass": "^0.7.1", "gulp-concat": "^2.2.0", "gulp-minify-css": "^0.3.0", "gulp-rename": "^1.2.0" }, "devDependencies": { "bower": "^1.3.3", "gulp-uglify": "^1.0.2", "gulp-util": "^2.2.14", "shelljs": "^0.3.0" } }
———————————————————————————————————————–
//---------------------------------------------------------------------------------------------------------------------------------------- //gulpfile.js 配置如下 //----------------------------------------------------------------------------------------------------------------------------------------- var gulp = require('gulp'); var gutil = require('gulp-util'); //var bower = require('bower'); var concat = require('gulp-concat'); var sass = require('gulp-sass'); var minifyCss = require('gulp-minify-css'); var rename = require('gulp-rename'); //var sh = require('shelljs'); var uglify = require('gulp-uglify'); //var templateCache = require('gulp-angular-templatecache'); //合并js gulp.task('libs',function(){ gulp.src('./www/js/**/*.js') .pipe(concat("libs.js")) //www/js下所有的js文件 合并到libs.js .pipe(gulp.dest("./www/lib/")) //合并后文件放入目标文件夹 .pipe(uglify()) //混淆文件 .pipe(rename("libs.min.js")) //重命名 .pipe(gulp.dest('./output/www/lib/')) //将混淆后文件放入目标文件夹 }) //合并css 用scss注意所有css文件后缀为scss gulp.task('sass', function(done) { gulp.src('./www/css/app.scss') //定义css统一入口app.scss文件 里面导入其他css文件(导入方式见图3图4)。 .pipe(sass()) //合并 .pipe(gulp.dest('./www/lib/')) //合并后放入目标文件夹 .pipe(minifyCss({ //混淆 keepSpecialComments: 0 })) .pipe(rename({ extname: '.min.css' })) //混淆后加后缀 .pipe(gulp.dest('./output/www/lib/')) //混淆文件放入目标文件夹 .on('end', done); }); //---------------------------------------------------------------------------------------------------------------------------------------
图1
要保证安装了相应的插件 ,没装的用npm命令安装。安装方式见图:
图2
要在项目路径下噢。
图3图4
导入路径相对入口app.scss