FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

Revert "Use webpack / fix sass in dev" · devhttps/frontend@45892f8 · GitHub

/ frontend Public
forked from guardian/frontend

Commit 45892f8

Browse files
sndrs
authored
Revert "Use webpack / fix sass in dev"
1 parent 921c848 commit 45892f8

12 files changed

Lines changed: 931 additions & 357 deletions

File tree

‎common/app/views/fragments/inlineJSBlocking.scala.html‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -77,11 +77,7 @@
7777
ref.parentNode.insertBefore(script, ref);
7878
})(document);
7979
} else {
80-
(function (document) {
81-
var script = document.createElement('script');
82-
var ref = document.getElementsByTagName('script')[0];
83-
script.src = '@Static("javascripts/app-webpack.js")';
84-
ref.parentNode.insertBefore(script, ref);
85-
})(document);
80+
@Html(common.Assets.js.curl);
81+
require(['boot']);
8682
}
8783
</script>

‎dev/.eslintrc.js‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎dev/bs-config.js‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
const path = require('path');
2-
31
// To run browser-sync with this config:
42
//
53
// - npm install -g browser-sync
@@ -26,6 +24,11 @@ module.exports = {
2624
},
2725
},
2826
watchOptions: {},
27+
files: [
28+
'static/transpiled/javascripts/**/*.js',
29+
'static/target/stylesheets/*.css',
30+
'static/target/stylesheets/**/*.css',
31+
],
2932
server: false,
3033
proxy: 'localhost:9000',
3134
port: 3000,
@@ -55,7 +58,7 @@ module.exports = {
5558
scrollThrottle: 0,
5659
reloadDelay: 0,
5760
reloadDebounce: 100,
58-
plugins: [path.dirname(require.resolve('bs-fullscreen-message'))],
61+
plugins: [],
5962
injectChanges: true,
6063
startPath: null,
6164
minify: false,

‎dev/gulpfile.js‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
/* eslint-disable import/no-extraneous-dependencies */
2+
3+
const path = require('path');
4+
5+
const gulp = require('gulp');
6+
const sourcemaps = require('gulp-sourcemaps');
7+
8+
const postcss = require('gulp-postcss');
9+
const autoprefixer = require('autoprefixer');
10+
const pxtorem = require('postcss-pxtorem');
11+
12+
const STATIC = path.resolve(__dirname, '..', 'static');
13+
const CSS = path.resolve(STATIC, 'target', 'stylesheets');
14+
const JS = path.resolve(STATIC, 'src', 'javascripts-legacy');
15+
const TRANSPILED = path.resolve(STATIC, 'transpiled', 'javascripts');
16+
17+
console.log(CSS);
18+
19+
gulp.task('watch', (done) => {
20+
gulp.watch([
21+
`${CSS}/**/*.css`,
22+
`!${CSS}/ie9.*.css`,
23+
`!${CSS}/old-ie.*.css`,
24+
`!${CSS}/webfonts-*.css`,
25+
], (event) => {
26+
gulp.src(event.path, { base: CSS })
27+
.pipe(sourcemaps.init({ loadMaps: true }))
28+
.pipe(postcss([
29+
autoprefixer(),
30+
pxtorem({
31+
replace: true,
32+
root_value: 16,
33+
unit_precision: 5,
34+
prop_white_list: [],
35+
}),
36+
]))
37+
.pipe(sourcemaps.write('.'))
38+
.pipe(gulp.dest(CSS));
39+
});
40+
41+
// copy any changed legacy js to the transpiled directory
42+
gulp.watch([
43+
`${JS}/**/*.js`,
44+
], (event) => {
45+
gulp.src(event.path, { base: JS })
46+
.pipe(gulp.dest(TRANSPILED));
47+
});
48+
49+
done();
50+
});

‎dev/watch.js‎

Lines changed: 0 additions & 102 deletions
This file was deleted.

‎makefile‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,12 @@ check-yarn: # PRIVATE
4141
# Watch and automatically compile/reload all JS/SCSS.
4242
# Uses port 3000 insead of 9000.
4343
watch: compile-dev
44-
@./dev/watch.js
44+
@npm run babel-watch & \
45+
npm run sass-watch & \
46+
npm run gulp-watch & \
47+
npm run browser-sync
48+
49+
4550

4651
# *********************** ASSETS ***********************
4752

‎package.json‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,12 @@
88
"domready": "^1.0.8",
99
"es5-shim": "^4.5.9",
1010
"html5shiv": "^3.7.3",
11+
"hyperscript-helpers": "^3.0.0",
12+
"immutable": "^3.8.1",
13+
"monapt": "^0.5.4",
1114
"react": "0.13.2",
1215
"tcp-ping": "^0.1.1",
16+
"virtual-dom": "^2.1.1",
1317
"webshot": "^0.18.0"
1418
},
1519
"devDependencies": {
@@ -27,11 +31,9 @@
2731
"babel-preset-env": "^1.1.4",
2832
"babel-preset-latest": "^6.16.0",
2933
"browser-sync": "^2.8.2",
30-
"bs-fullscreen-message": "^1.1.0",
3134
"btoa": "1.1.2",
3235
"chalk": "^1.1.3",
3336
"check-dependencies": "^0.11.0",
34-
"chokidar": "^1.6.1",
3537
"cp-file": "^4.1.0",
3638
"cpy": "^4.0.1",
3739
"cssnano": "^3.8.1",
@@ -48,6 +50,11 @@
4850
"execa": "^0.5.0",
4951
"figures": "^2.0.0",
5052
"glob": "^7",
53+
"gulp": "^3.9.0",
54+
"gulp-load-tasks": "^0.8.3",
55+
"gulp-postcss": "^6.1.1",
56+
"gulp-sass": "^2.0.1",
57+
"gulp-sourcemaps": "^1.5.2",
5158
"gzip-size": "^3.0.0",
5259
"hasha": "^2.2.0",
5360
"jasmine-core": "^2.3.2",
@@ -72,7 +79,6 @@
7279
"mkdirp": "0.5.0",
7380
"moment": "2.8.3",
7481
"node-sass": "^3.8.0",
75-
"ora": "^1.1.0",
7682
"perfectionist": "^2.3.1",
7783
"pify": "^2.3.0",
7884
"postcss": "^5.2.6",
@@ -83,7 +89,6 @@
8389
"requireindex": "^1.1.0",
8490
"requirejs": "^2.3.2",
8591
"rimraf": "^2.5.4",
86-
"sass-graph": "^2.1.2",
8792
"sass-lint": "^1.9.1",
8893
"semver": "^5.3.0",
8994
"sorted-object": "^1.0.0",
@@ -100,6 +105,10 @@
100105
"fsevents": "*"
101106
},
102107
"scripts": {
103-
"postinstall": "./tools/task-runner/runner githooks --verbose"
108+
"postinstall": "./tools/task-runner/runner githooks --verbose",
109+
"sass-watch": "node-sass -w ./static/src/stylesheets -o ./static/target/stylesheets --source-map=true",
110+
"babel-watch": "BABEL_ENV=development babel ./static/src/javascripts --watch -d ./static/transpiled/javascripts >/dev/null 2>&1",
111+
"gulp-watch": "gulp --cwd ./dev watch",
112+
"browser-sync": "browser-sync start --config ./dev/bs-config.js"
104113
}
105114
}

‎tools/__tasks__/compile/css/sass.js‎

Lines changed: 74 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,71 @@
1-
const compile = require('../../../compile-css');
1+
const fs = require('fs');
2+
const path = require('path');
3+
4+
const sass = require('node-sass');
5+
const mkdirp = require('mkdirp');
6+
const glob = require('glob');
7+
const postcss = require('postcss');
8+
const autoprefixer = require('autoprefixer');
9+
const pxtorem = require('postcss-pxtorem');
10+
const pify = require('pify');
11+
12+
const { src, target } = require('../../config').paths;
13+
14+
const sassDir = path.resolve(src, 'stylesheets');
15+
16+
const sassDefaults = {
17+
outputStyle: 'compressed',
18+
sourceMap: true,
19+
precision: 5,
20+
};
21+
22+
const browserslist = [
23+
'Firefox >= 26',
24+
'Explorer >= 10',
25+
'Safari >= 5',
26+
'Chrome >= 36',
27+
28+
'iOS >= 5',
29+
'Android >= 2',
30+
'BlackBerry >= 6',
31+
'ExplorerMobile >= 7',
32+
33+
'> 2% in US',
34+
'> 2% in AU',
35+
'> 2% in GB',
36+
];
37+
38+
const remifications = {
39+
replace: true,
40+
root_value: 16,
41+
unit_precision: 5,
42+
prop_white_list: [],
43+
};
44+
45+
46+
const sassRenderP = pify(sass.render);
47+
const writeFileP = pify(fs.writeFile);
48+
const getFiles = query => glob.sync(path.resolve(sassDir, query));
49+
50+
const compile = (query, { browsers, remify = true }) => Promise.all(
51+
getFiles(query).map((filePath) => {
52+
const dest = path.resolve(target, 'stylesheets', path.relative(sassDir, filePath).replace('scss', 'css'));
53+
const sassOptions = Object.assign({
54+
file: filePath,
55+
outFile: dest,
56+
}, sassDefaults);
57+
58+
const postcssPlugins = [autoprefixer({ browsers })];
59+
if (remify) {
60+
postcssPlugins.push(pxtorem(remifications));
61+
}
62+
63+
mkdirp.sync(path.parse(dest).dir);
64+
return sassRenderP(sassOptions)
65+
.then(result => postcss(postcssPlugins).process(result.css.toString()))
66+
.then(result => writeFileP(dest, result.css));
67+
})
68+
);
269

370
module.exports = {
471
description: 'Compile Sass',
@@ -15,10 +82,14 @@ module.exports = {
1582
}),
1683
}, {
1784
description: 'Modern',
18-
task: () => compile('!(_|ie9|old-ie)*.scss'),
85+
task: () => compile('!(_|ie9|old-ie)*.scss', {
86+
browsers: browserslist,
87+
}),
1988
}, {
2089
description: 'Inline',
21-
task: () => compile('inline/*.scss'),
90+
task: () => compile('inline/*.scss', {
91+
browsers: browserslist,
92+
}),
2293
}],
2394
concurrent: true,
2495
};

0 commit comments

Comments
 (0)
Back | FazBrowse Home | New Git URL