在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):rmdias/gulp-web-app-workflow开源软件地址(OpenSource Url):https://github.com/rmdias/gulp-web-app-workflow开源编程语言(OpenSource Language):CSS 53.7%开源软件介绍(OpenSource Introduction):Gulp Web App WorkflowBoilerplate from web app using Gulp.JS
We use:
Usage
Folders StructureYour editable files are in /assets folder. And content of folders that are in index will be generated automatically. The basic structure of the project is: . |--/assets |--|--/html |--|--/sass |--|--/js |--|--/img |--/css |--/fonts |--/img |--/js |--index.html |--package.json |--gulpfile.js The package.json{
"name": "Gulp-web-app-workflow",
"version": "0.0.1",
"description": "Boilerplate from web app using Gulp.JS",
"main": "index.html",
"author": "Rodolfo Dias",
"license": "BSD",
"devDependencies": {
"gulp-util": "~2.2.9",
"gulp-uglify": "~0.1.0",
"gulp-sass": "~0.2.3",
"gulp-concat": "~2.1.7",
"gulp-ruby-sass": "~0.1.1",
"gulp-minify-html": "~0.1.0",
"gulp-imagemin": "~0.1.4",
"gulp-jshint": "~1.3.4",
"map-stream": "~0.1.0"
}
} The gulpfile.jsAny file that you put in your production folder will be compiled automatically. HTML, SASS, JS or images does not matter. var gulp = require('gulp');
// package.json
var pkg = require('./package.json');
//plugins
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var jshint = require('gulp-jshint');
var sass = require('gulp-ruby-sass');
var minifyHtml = require('gulp-minify-html');
var imagemin = require('gulp-imagemin');
var map = require('map-stream');
// jshint reporter
var myReporter = map(function (file, cb) {
if (!file.jshint.success) {
console.log('JSHINT fail in ' + file.path);
file.jshint.results.forEach(function (err) {
if (err) {
console.log(' '+ file.path + ': line ' + err.line + ', col ' + err.character + ', code ' + err.code + ', ' + err.reason);
}
});
}
if (file.jshint.errorCount !== undefined) {
console.log('Your project have ' + file.jshint.errorCount + ' errors...');
} else{
console.log('Your project have 0 errors...');
};
cb(null, file);
});
// tasks
gulp.task('build', function(){
// { concat, minify & jshint }
var scriptFiles = './assets/js/**/*.js';
var scriptDist = './js';
gulp.src(scriptFiles)
.pipe(jshint())
.pipe(myReporter)
.pipe(concat('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest(scriptDist));
// { sass }
var sassFiles = './assets/sass/all.sass';
var sassDist = './css';
gulp.src(sassFiles)
.pipe(concat('all.min.sass'))
.pipe(sass({unixNewlines: true, style: 'compressed'}))
.pipe(gulp.dest(sassDist));
// { image optimizer }
var imageFiles = './assets/img/**/*';
var imageDist = './img';
gulp.src(imageFiles)
.pipe(imagemin())
.pipe(gulp.dest(imageDist));
// { html }
var hmltFiles = './assets/html/**/*.html';
var htmlDist = './';
gulp.src(hmltFiles)
.pipe(minifyHtml())
.pipe(gulp.dest(htmlDist));
});
// The default task (called when you run `gulp`)
gulp.task('default', function() {
gulp.run('build');
// Watch files and run tasks if they change
gulp.watch('./assets/**/*', function() {
var date = new Date(), hour = date.getHours(), minutes = date.getMinutes(), seconds = date.getSeconds(),
buildTime = hour + ':' + minutes + ':' + seconds;
gulp.run('build');
console.log('------------- END -------------', buildTime);
});
}); And now is only run the gulp and be happy
## Contributing Check CONTRIBUTING.md. |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论