使用gulp处理js和less或sass或css文件目录/项目根目录-gulpfile.js-package.json-/images-/src--/less--/js--*.html//-node_modules//installation包依赖后自动生成的//--/web//编译文件放这里安装包依赖。在gitbash中,cd到项目目录,然后npminstall会自动安装package.json中写好的插件,根据自己项目所需的插件进行安装,下面是我项目的一些依赖{"name":"ionic-project","version":"1.0.0","description":"一个Ionic项目","devDependencies":{"del":"^2.2.0","gulp":"^3.9.1","gulp-clean":"^0.3.1",//清理文件"gulp-concat":"^2.6.0",//合并文件"gulp-less":"^3.0.5",//编译less,如果是sass,需要node库编译"gulp-minify-css":"^1.2.3",//压缩css"gulp-rename":"^1.2.2",//重命名"gulp-template":"^3.1.0",//Template,这个可以替换一些关键字"gulp-uglify":"^1.5.3"//js压缩混乱}}写项目的gulpfile.jsvargulp=require('gulp'),minifycss=require('gulp-minify-css'),concat=require('gulp-concat'),uglify=require('gulp-uglify'),重命名=require('gulp-rename'),less=require('gulp-less'),gclean=require('gulp-clean'),template=require('gulp-template');vardata={cssLink:'css/main.css',jsLink:'js/main.min.js'};//资源路径,稍后会用模板替换gulp.task('clean',function(){返回gulp.src('web',{read:false}).pipe(gclean());});gulp.task('minifycss',function(){gulp.src('src/less/*.less').pipe(less()).pipe(minifycss())//执行compression.pipe(gulp.dest('web/css'));//输出文件夹});gulp.task('minifyjs',function(){gulp.src('src/js/*.js').pipe(concat('main.js'))//合并所有js到main.js.pipe(rename({suffix:'.min'}))//重命名压缩文件名.pipe(uglify())//compressed.pipe(gulp.dest('web/js'));//output});gulp.task('watch',function(){//监听文件变化gulp.watch('src/less/*.less',['minifycss']);gulp.watch('src/js/*.js',['minifyjs']);gulp.watch('src/*.html',['temp']);});gulp.task('temp',function(){returngulp.src('src/*.html').pipe(template(data)).pipe(gulp.dest('web'));});gulp.task('default',['clean'],function(){gulp.start('minifycss','minifyjs','images',"temp","watch");});然后直接运行gulp,它会默认执行默认任务,然后会一直监听文件变化。图片压缩可以使用gulp插件来压缩,但是个人觉得还是用其他的方式比较好,所以我把图片放在源码外面,推荐两个压缩图片的网站tinypng。智图可以在上线前压缩图片。其他的也可以在这个过程中添加。es6的编译需要两个库,可以自动加css前缀等,现在webpack很流行,但是对于简单的项目,gulp更适合公众号我们的主页
