欢迎光临
我们一直在努力

gulp使用及配置package.json、gulpfile.js

深奥的前端开发框架,今天总算“摸熟”了。。。

还有什么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);
});
//---------------------------------------------------------------------------------------------------------------------------------------

gulp使用及配置package.json、gulpfile.js - 圈圈 -  大雄妈的博客图1

要保证安装了相应的插件 ,没装的用npm命令安装。安装方式见图:

gulp使用及配置package.json、gulpfile.js - 圈圈 -  大雄妈的博客图2
要在项目路径下噢。

图3图4

gulp使用及配置package.json、gulpfile.js - 圈圈 -  大雄妈的博客
gulp使用及配置package.json、gulpfile.js - 圈圈 -  大雄妈的博客
导入路径相对入口app.scss
赞(0)
版权归原作者所有,如有侵权请告知。达维营-前端网 » gulp使用及配置package.json、gulpfile.js

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址